wie Kreise (Datenpunkte) in d3.js bewegen

Question

Ich habe 2 Linien in Form von Wellen in x-y axis aufgetragen zufällig generierten Daten basierend auf und zeige ich Kreise auf den Wellen der data points bezeichnet auf es.

Basierend auf setInterval of 200 ms, ich bin die Originaldaten zu aktualisieren und die Linien (Wellen) nach links bewegen, aber das Problem ist, dass die nur Kreise, die in dem Anfangsintervall gibt es bewegen und für die 2. Intervall weiter zeigen sich die Kreise nicht auf den Wellen.

siehe jsfiddle für den laufenden Code: https://jsfiddle.net/rajatmehta/tm5166e1/10/

hier ist der Code:

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

eine Ahnung, wie das zu tun?

Answer 1

Sie müssen basierend auf den aktualisierten Daten neue Kreise erstellen. Momentan aktualisieren Sie die Daten nur für die Auswahl, aber nicht für das Anhängen von Kreisen und dann für das Verschieben vorhandener Kreise nach links.

Zum Beispiel könnten Sie dazu:

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) + ")"); 

Siehe hier: https://jsfiddle.net/tm5166e1/11/

Dieser fügt die Daten, den Zeitstempel als Schlüssel, so dass Sie nur für neu hinzugefügte datum neue Kreise erstellen.

(Es gibt ein Problem, wenn sie zum ersten Mal hinzugefügt werden, die über den Rahmen dieser Frage ist, aber es wird diese Beispiele Check-out wert sein: https://bl.ocks.org/tomshanley/15a2b09a95ccaf338650e50fd207fcbf und https://bl.ocks.org/mbostock/1642874)