Comment mettre à jour le diagramme de dispersion?

Question

Je possède ce tableau et le graphique avec diagramme de dispersion:

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

Et je suis en train de mettre à jour les positions des points de dispersion lorsque les valeurs dans le deuxième changement de colonne de table.

Sur la base de cette SO je pensais que je pouvais utiliser une seule ligne (comme je ne change pas le nombre de points, à leurs positions):

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

Cependant, ce 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]); 
    }); 

me donne cette erreur:

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

Answer 1

Le principal problème est que:

svg.selectAll("circle") n'est pas une sélection typique que vous avez redéfini svg à une transition plutôt que d'une sélection générique:

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

Toute sélection en utilisant cette variable svg retournera une transition (from the API documentation), pour exemple avec 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.

Pour les transitions, la méthode .data n'est pas disponible.

Si vous utilisez d3.selectAll('circle') vous aurez plus de succès. Sinon, vous pouvez laisser tomber le .transition() lorsque vous définissez svg et appliquez seulement à des éléments individuels:

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

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

... 

Voici un updated fiddle prenant cette dernière approche.

---

Aussi, pour votre transition de mise à jour, vous pouvez changer d'échelle et les valeurs que vous utilisez pour obtenir vos nouvelles valeurs x, y (pour correspondre à vos noms de variables):

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