git hub issue in my pc

Question

Кто-нибудь знает пример того, как я могу начать и остановить движущийся график, щелкнув, а затем снова щелкнув?

Я хочу добавить прослушиватель событий к моему графику, поэтому, щелкнув на странице, график остановится, а затем щелкнув по нему, он начнет двигаться.

- 

Я добавил холст, чтобы использовать прослушиватель кликов. Но я не знаю, как написать функцию.

Answer 1

Проверьте эту скрипту http://jsfiddle.net/LgQeY/1/. Модифицируйте ваш код, чтобы начать график при нажатии кнопки. Удовлетворение вы можете изменить далее.

Вот код

var t = -1; 
var n = 40; 
var duration = 750; 

var data1 = initialise(); 
var data2 = initialise(); 
var data3 = initialise(); 
var data4 = initialise(); 

//Make stacked data 

var data1s = data1; 
var data2s = []; for (var i = 0; i < data1s.length; i++) { data2s.push({ time: data1[i].time, value: data1s[i].value + data2[i].value }) }; 
var data3s = []; for (var i = 0; i < data2s.length; i++) { data3s.push({ time: data2[i].time, value: data2s[i].value + data3[i].value }) }; 
var data4s = []; for (var i = 0; i < data3s.length; i++) { data4s.push({ time: data3[i].time, value: data3s[i].value + data4[i].value }) }; 

var graph; 
var path1; 
var path2; 
var path3; 
var path4; 
var x; 
var line; 
var axis; 
var xAxis; 

function DoChart(){ 

var margin = { 
    top: 10, 
    right: 10, 
    bottom: 20, 
    left: 40 
}, 
width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

x = d3.scale.linear() 
    .domain([t - n + 1, t]) 
    .range([0, width]); 

var y = d3.scale.linear() 
    .domain([0, 400]) 
    .range([height, 0]); 

line = d3.svg.line() 
    .interpolate("basis") 
    .x(function (d, i) { 
     return x(d.time); 
    }) 
    .y(function (d, i) { 
     return y(d.value); 
    }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom); 

var g = svg.append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

// extra svg to clip the graph and x axis as they transition in and out 
graph = g.append("svg") 
    .attr("width", width) 
    .attr("height", height + margin.top + margin.bottom); 

xAxis = d3.svg.axis().scale(x).orient("bottom"); 
axis = graph.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(0," + height + ")") 
    .call(x.axis = xAxis); 

g.append("g") 
    .attr("class", "y axis") 
    .call(d3.svg.axis().scale(y).orient("left")); 

path1 = graph.append("g") 
    .append("path") 
    .data([data1s]) 
    .attr("class", "line1"); 

path2 = graph.append("g") 
    .append("path") 
    .data([data2s]) 
    .attr("class", "line2"); 

path3 = graph.append("g") 
    .append("path") 
    .data([data3s]) 
    .attr("class", "line3"); 

path4 = graph.append("g") 
    .append("path") 
    .data([data4s]) 
    .attr("class", "line4"); 


tick(); 
} 

function tick() { 

    t++; 

    // push 
    updateData(data1); 
    updateData(data2); 
    updateData(data3); 
    updateData(data4); 

    //Make stacked data 

    data1s = data1; 
    data2s = []; for (var i = 0; i < data1s.length; i++) { data2s.push({ time: data1s[i].time, value: data1s[i].value + data2[i].value }) }; 
    data3s = []; for (var i = 0; i < data2s.length; i++) { data3s.push({ time: data2s[i].time, value: data2s[i].value + data3[i].value }) }; 
    data4s = []; for (var i = 0; i < data3s.length; i++) { data4s.push({ time: data3s[i].time, value: data3s[i].value + data4[i].value }) }; 

    //data2s = data2sa; 

    // update the domains 
    x.domain([t - n + 2, t]); 

    // redraw the lines 
    graph.select(".line1").attr("d", line).attr("transform", null); 
    graph.select(".line2").attr("d", line).attr("transform", null); 
    graph.select(".line3").attr("d", line).attr("transform", null); 
    graph.select(".line4").attr("d", line).attr("transform", null); 

    // slide the line left 
    path1.transition() 
     .duration(duration) 
     .ease("linear") 
     .attr("transform", "translate(" + x(t - n + 1) + ")"); 

    path2 
     .data([data2s]) 
     .transition() 
     .duration(duration) 
     .ease("linear") 
     .attr("transform", "translate(" + x(t - n + 1) + ")"); 

    path3 
     .data([data3s]) 
     .transition() 
     .duration(duration) 
     .ease("linear") 
     .attr("transform", "translate(" + x(t - n + 1) + ")"); 

    path4.data([data4s]) 
     .transition() 
     .duration(duration) 
     .ease("linear") 
     .attr("transform", "translate(" + x(t - n + 1) + ")"); 

    // slide the x-axis left 
    axis.transition() 
     .duration(duration) 
     .ease("linear") 
     .call(xAxis) 
     .each("end", tick); 


    data1.shift(); 
    data2.shift(); 
    data3.shift(); 
    data4.shift(); 


} 

function initialise() { 
    var time = -1; 
    var arr = []; 
    for (var i = 0; i < n; i++) { 
     var obj = { 
      time: ++time, 
      value: Math.floor(Math.random() * 100) 
     }; 
     arr.push(obj); 
    } 
    t = time; 
    return arr; 
} 

// push a new element on to the given array 
function updateData(a) { 
    var obj = { 
     time: t, 
     value: Math.floor(Math.random() * 100) 
    }; 
    a.push(obj); 
} 

Надеется, что это помогает !!

Answer 2

Понял!

Вот обновленный jsFiddle: http://jsfiddle.net/QBDGB/31/

Дело с красной каймой ваш холст, нажмите, что остановить и перезапустить график. Скажите, если я неправильно понял ваш вопрос, и я постараюсь решить любые проблемы.

Изменено сделать график кликабельным:

document.getElementsByTagName('svg')[0].onclick=function() {