Wie wird der Streudiagramm aktualisiert?

Question

Ich habe diese Tabelle und Grafik mit scattergraph:

https://jsfiddle.net/horacebury/bygscx8b/6/

Und ich versuche, um die Positionen der Streupunkte, wenn die Werte in der zweiten Spalte der Tabelle Änderung zu aktualisieren.

auf dieser Basis, also dachte ich, dass ich nur eine einzige Zeile verwenden könnte (wie ich bin nicht die Anzahl der Punkte zu ändern, nur um ihre Positionen):

https://stackoverflow.com/a/16071155/71376

jedoch diesen Code:

svg.selectAll("circle") 
    .data(data) 
    .transition() 
    .duration(1000) 
    .attr("cx", function(d) { 
    return xScale(d[0]); 
    }) 
    .attr("cy", function(d) { 
    return yScale(d[1]); 
    }); 

gibt mir diese Fehlermeldung:

Uncaught TypeError: svg.selectAll(...).data is not a function 

Answer 1

Das primäre Problem ist, dass:

svg.selectAll("circle") keine typische Auswahl ist, wie Sie svg sein, um ein Übergang anstatt eine generische Auswahl neu definiert haben:

var svg = d3.select("#chart").transition(); 

Jede Auswahl mit diesem svg Variable einen Übergang (from the API documentation) zurückkehren wird, für Beispiel mit transition.selectAll():

For each selected element, selects all descendant elements that match the specified selector string, if any, and returns a transition on the resulting selection.

für Übergänge ist die .data Methode nicht zur Verfügung.

Wenn Sie d3.selectAll('circle') verwenden, werden Sie mehr Erfolg haben. Alternativ können Sie die .transition() fallen, wenn Sie svg definieren und wenden Sie es nur auf einzelne Elemente:

var svg = d3.select('#chart'); 

svg.select(".line").transition() 
    .duration(1000).attr("d", valueline(data)); 

... 

Hier ein updated fiddle ist die letztere Ansatz.

---

Auch für das Aktualisierungs-Übergang möchten Sie vielleicht Skala ändern und Werte, die Sie verwenden, um Ihre neuen x zu erhalten, y-Werte (Ihre Variablennamen übereinstimmen):

//Update all circles 
    svg.selectAll("circle") 
     .data(data) 
     .transition() 
     .duration(1000) 
     .attr("cx", function(d) { 
     return x(d.date); 
     }) 
     .attr("cy", function(d) { 
     return y(d.close); 
     }); 
    }