javascript - 如何使用 d3.js 自动更新行转换

Question

如何自动更新给定json数据的折线图过渡，我已经开发了折线图，但我不知道如何过渡或动画自动更新图表。

下面是json对象

var data=[
                    {a: 43097, b: 1},
                    {a: 43098, b: 3},
                     {a: 43099, b: 4},
                     {a: 43100, b: 8},
                     {a: 43101, b: 5},
                     {a: 43102, b: 5},
                     {a: 43103, b: 3},
                     {a: 43104, b: 2},
                     {a: 43104, b: 5},
                     {a: 43104, b: 8},
                     {a: 43104, b: 5},
                     {a: 43104, b: 7}
                     ]

使用上面的 json 对象，我可以使用 d3.js 绘制折线图

但是，现在我需要绘制线条过渡或动画

我尝试了一些代码来进行转换，但无法进行转换代码如下

setInterval(function (){
                         var s=data.shift;
                         data.push(s);
                         animation();},1000)
                              }

我没有得到转换

谁能告诉我如何进行转换

Answer 1

您的数据存在一些问题。首先，我认为您的 a 参数对于最后 5 个条目是恒定的，因此该行只会绘制第一个条目。

此外，方法 animate() 不会对该行执行任何操作(除非您以某种方式实现了它并且未在示例中显示)。另外，您需要更新轴域，否则您的行将无法正确显示。

我创建了一个 JSFiddle here所以请看一下。本质上，我清理了您的数据并创建了一个setInterval方法，如下所示:

setInterval(
    function (){
        // Append your new data, here I just add an increment to your a
        data.push(
             {"a":Number(parseFloat(d3.max(data, function(d){return d.a}))+1),
               "b":Math.random()*10
             });
            //Redraw the line
            svg.select(".line").transition().duration(50).attr("d",line)
            //Recompute the axes domains
            x.domain(d3.extent(data, function(d) { return parseFloat(d.a); }));
            y.domain(d3.extent(data, function(d) { return parseFloat(d.b); }));
            // Redraw the axes
            svg.select('.x-axis').call(xAxis);
            svg.select('.y-axis').call(yAxis)
},1000)

希望这有帮助。