我有2条线基于随机产生的数据在绘制x-y axis
波的形式,并且我显示圆圈上波浪表示在data points
它。如何移动在d3.js圆圈(数据点)
基于setInterval of 200 ms
,我更新的原始数据和线(波)被移动到左边,但问题是,它们是存在于所述初始间隔的仅圆为第二间隔移动和此后这些圈子并未出现在海浪上。
看到的jsfiddle为运行代码:https://jsfiddle.net/rajatmehta/tm5166e1/10/
这里是代码:
chartBody.append("path") // Add the valueline path
.datum(globalData)
.attr("id", "path1")
.attr("class", "line")
.attr("d", valueline);
chartBody.selectAll(null)
.data(globalData)
.enter()
.append("circle")
.attr("class", "dot1")
.attr("r", 3)
.attr("cx", function(d) {
console.log(d);
return x(d.timestamp);
})
.attr("cy", function(d) {
return y(d.value);
});
chartBody.selectAll(null)
.data(globalDataNew)
.enter()
.append("circle")
.attr("class", "dot2")
.attr("r", 3)
.attr("cx", function(d) {
return x(d.timestamp);
})
.attr("cy", function(d) {
return y(d.value);
});
chartBody.append("path") // Add the valueline path
.datum(globalDataNew)
.attr("id", "path2")
.attr("class", "line")
.attr("d", valueline2);
任何想法如何做到这一点?
它的工作原理,但在加入一些延迟行向左移时的圆圈。我不想那样,有什么办法可以防止这种情况发生? – fateh
可能会尝试Mike Bosticks示例中的剪辑路径技术,然后添加圆圈并将该行向右延伸,以便它们在可见时同步。 –