如何移动在d3.js圆圈（数据点）

Question

我有2条线基于随机产生的数据在绘制x-y axis波的形式，并且我显示圆圈上波浪表示在data points它。

基于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); 

任何想法如何做到这一点？

Answer 1

您需要根据更新的数据创建新的圆圈。目前，您只更新要选择的数据，但不添加圆圈，然后将现有圆圈移至左侧。

例如，你可以这样：

chartBody.selectAll(".dot1") 
    .data(globalData, function(d){ return d.timestamp; }) 
    .enter() 
    .append("circle") 
    .attr("class", "dot1") 
    .attr("r", 3) 
    .attr("cx", function(d) { 
    return x(d.timestamp); 
    }) 
    .attr("cy", function(d) { 
    return y(d.value); 
    }); 

    chartBody.selectAll(".dot2") 
    .data(globalDataNew, function(d){ return d.timestamp; }) 
    .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); 
    }); 

    d3.selectAll(".dot1") 
    //.data(globalData) 
    .transition() 
    .duration(duration) 
    .ease("linear") 
    .attr("transform", "translate(" + String(dx) + ")"); 


    d3.selectAll(".dot2") 
    //.data(globalDataNew) 
    .transition() 
    .ease("linear") 
    .duration(duration) 
    .attr("transform", "translate(" + String(dx) + ")"); 

在这里看到：https://jsfiddle.net/tm5166e1/11/

这追加的数据，使用时间戳作为一个关键，所以你只能创建为新增加的基准新的社交圈。

（有当他们第一次添加，这超出了问题的范围的问题，但是这将是值得一试这些例子：https://bl.ocks.org/tomshanley/15a2b09a95ccaf338650e50fd207fcbf和https://bl.ocks.org/mbostock/1642874）