2

我有一个简单的折线图，每 5 秒检查一次更新并在需要时重新绘制线/比例。这一切都很好，除了：数据点。

我在重绘中缺少什么来移动点？首次渲染图形时，这些点就在那里。但是在更新时，当线重新绘制时它们不会移动。所以我在更新时选择了一个新的数据源，而旧的数据点保持不变。

更新时重绘

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

这是我不想要的。 在此处输入图像描述

4

2 回答 2

3

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

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

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

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

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

于 2013-04-16T02:26:25.590 回答
0

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

问题是这一行：

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

它需要被删除，然后在更新方法中您可以添加和删除圈子。

于 2014-11-17T13:40:40.807 回答