Javascript 我的电脑中的git集线器问题

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

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

-

我添加了画布以使用click listener。但我不知道如何编写函数。

检查此小提琴。修改代码以在单击按钮时启动图形。希望您可以进一步修改

这是密码

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);
}

var t=-1；
var n=40；
var持续时间=750；
var data1=初始化（）；
var data2=初始化（）；
var data3=初始化（）；
var data4=初始化（）；
//生成堆叠数据
var data1s=data1；
var data2s=[]；对于（var i=0；i

希望这有帮助

明白了

以下是更新的JSFIDLE：

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

更改为使图形可单击：

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

---

请在您的问题中包含相关代码。质量过滤器的存在是有原因的！已回滚到以前的版本@萨沙，我不知道你想做什么，但这是一个非常糟糕的问题编辑。答案没有字符限制。请使用正确的语法，即

you

而不是

u

和

your

而不是

ur

@FelixKling-aye-aye船长：）非常感谢您的大力帮助：）我非常感谢！但是没有按钮有什么办法可以做到吗？怎么做