如何移動在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）