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

希望这会有所帮助!!

github问题在我的电脑里

2 个答案: