1

我已经简要地浏览了几个 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); 
});

非常感谢您的评论！

4

1 回答 1

2

您需要更改附加元素的代码。第一次（没有图表时），可以保持不变：

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 的方式是将数据传递给一个专门的函数，该函数将其绑定到一个元素，然后相应地设置属性。也就是说，附加该行的初始代码将是

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

并且要更新的代码是

vis.select("path").datum(data).attr("d", line);
于 2013-05-03T09:30:22.037 回答