javascript - 我的 D3.js 代码导致将新数据添加为新图形，我希望将其附加到现有图形。我做错了什么？

Question

我已经简单地浏览了几个 d3 教程，但我对动画(即变换等)的工作方式有点困惑。

我在服务器上有一个 csv 文件，该文件正在由一个单独的进程更新，我希望我的小网页能够绘制数据图表。

这是我的。

我的问题是，如您所见，它每 10 秒附加一个新图形，而不是更新当前图形并仅绘制新点。我需要改变什么才能产生这种效果？

$(document).ready(function() {
    $.ajaxSetup({ cache: false }); 
    setInterval(function() {
        $('#file').load('file.csv', function(){
            var input = $('#file').html();
            var data = $.csv.toObjects(input);
            var price = [];
            var time = [];
            for (var row in data){
                price.push(data[row]["Price"]);
            }
            for (var row in data){
                time.push(data[row]["Time"]);
            }
        var data = price;
        w = 400,
        h = 200,
        margin = 20,
        y = d3.scale.linear().domain([0, d3.max(data)]).range([0 + margin, h - margin]),
        x = d3.scale.linear().domain([0, data.length]).range([0 + margin, w - margin])
        var vis = d3.select("body")
            .append("svg:svg")
            .attr("width", w)
            .attr("height", h);
        var g = vis.append("svg:g")
            .attr("transform", "translate(0, 200)");
        var line = d3.svg.line()
            .x(function(d,i) { return x(i); })
            .y(function(d) { return -1 * y(d); })
        g.append("svg:path").attr("d", line(data));
....

    }, 10000); 
});

非常感谢您的意见!

Answer 1

您需要更改附加元素的代码。第一次(没有图的时候)可以保持不变:

var vis = d3.select("body")
        .append("svg:svg")
        .attr("width", w)
        .attr("height", h);
var g = vis.append("svg:g")
        .attr("transform", "translate(0, 200)");
var line = d3.svg.line()
        .x(function(d,i) { return x(i); })
        .y(function(d) { return -1 * y(d); })
g.append("svg:path").attr("d", line(data));

随后，它应该如下所示:

vis.select("path").attr("d", line(data));

这是假设您在某处保存了对生成的 SVG 的引用，当然您也可以每次都重新选择它。您可能还需要代码来更新您的体重秤。

请注意，一种更 D3 的方法是将数据传递给一个专门的函数，该函数将把它绑定(bind)到一个元素，然后相应地设置属性。也就是说，追加该行的初始代码是

g.append("svg:path").datum(data).attr("d", line);

要更新的代码是

vis.select("path").datum(data).attr("d", line);