更新时d3.js动画/过渡圈

Question

我有一个简单的折线图，每隔5秒检查一次更新＆amp;如果需要，重绘线/比例。这一切都运行良好除了：数据点。

在重绘时我缺少什么来移动点？首次渲染图形时会出现点。但是在更新时，当重新绘制线时它们不会移动。所以我在更新时选择了一个新的数据源，旧的数据点仍然是固定的。

重绘时重绘

var svgAnimate = d3.select("#animateLine").transition();

        svgAnimate.select(".line") // change the line
            .duration(750)
            .attr("d", valueline(data));
        svgAnimate.selectAll(".circle") // change the circle
            .duration(750)
            .attr("d", valueline(data));
        svgAnimate.select(".x.axis") // change the  x axis
            .duration(750)
            .call(xAxis);
        svgAnimate.select(".y.axis") // change the y axis
            .duration(750)
            .call(yAxis);

初步绘图：

svgAnimate.selectAll("dot")
        .data(data)
    .enter().append("circle")
        .attr("class", "circle")
        .attr("r", 5)
        .style("fill", function(d) { 
            if (d.close <= 400) {return "red"} 
            else { return "black" }
        ;})
        .attr("cx", function(d) { return x(d.date); })
        .attr("cy", function(d) { return y(d.close); })

这是我不想要的。

Answer 1

您的问题是函数valueLine是您用来绘制线条的函数。因此，当使用新数据再次调用它时，您重绘该行。

对于圈子，属性d毫无意义。但是，如果我们认为y轴没有改变，那么您可以执行以下操作：

svgAnimate.selectAll(".circle") // change the circle
    .data(newData)
    .duration(750)
    .attr("cx", function(d){return x(d.date)};

如果您需要更改y坐标，则必须修改圆圈的cy属性。

我的代码可能不是必要的严格，如果您仍有问题请发布jsFiddle。

Answer 2

我在图表中更新圈子也遇到了一些问题。 这是一个工作小提琴，如果他们有同样的问题，可能会有一些人为将来的搜索： http://jsfiddle.net/noo8k17n/

问题在于这一行：

var svgAnimate = d3.select("#animateLine").transition();

需要将其删除，然后在更新方法中添加和删除圈子。