javascript - 我的电脑中的 git hub 问题

Question

有谁知道我如何通过单击然后重新单击来启动和停止移动图形的任何示例？

我想向我的图表添加一个事件侦听器，因此通过单击页面停止图表，然后重新单击它开始移动。

-

我已添加画布以使用点击侦听器。但我不知道如何编写函数。

Answer 1

知道了！

这是更新的 jsFiddle：http: //jsfiddle.net/QBDGB/31/

带有红色边框的东西是您的画布，单击它以停止并重新启动图形。如果我误解了你的问题，请告诉我，我会尽力解决任何问题。

更改为使图表可点击：

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

Answer 2

检查这个小提琴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);
}

希望这可以帮助！！