d3 anhängen und Probleme eingeben

Question

So habe ich ein Problem, wenn ein sehr einfaches d3-Tutorial folgt. Im Grunde bin ich versucht, dann enter.append Wie unten gezeigt Aufruf von Bindungsdaten an die aktuellen svg Kreis-Elemente SVG Kreis-Elemente hinzuzufügen:

var svg =d3.select("body").selectAll("svg"); 
var circle = svg.selectAll("circle"); 
var w=window.innerWidth; 
console.log(circle); 
circle.data([500,57,112,200,600,1000]); 


circle.enter().append("circle") 
    .attr("cy",function(d) { 
     return (d) 
     }) 
    .attr("cx", function(i){ 
     return (i*100) 
    }) 
    .attr("r", function(d) { 
     return Math.sqrt(d); 
     }) 

, die wie es scheint, 3 neue Kreis-Elemente hinzufügen würde (weil ich schon 3 haben erstellt). Anstatt jedoch diese 3 neuen Kreiselemente hinzugefügt bekommen, ich laufe in diesen Fehler:

Uncaught TypeError: Object [object SVGCircleElement],[objectSVGCircleElement],[object SVGCircleElement] has no method 'enter'

ich im Wesentlichen die gleiche Sache mit den Absätzen getan haben, und es scheint gut zu funktionieren:

var p =d3.select("body").selectAll("p") 
.data([4, 8, 15, 16, 23, 42]) 
.text(function(d) { return "I'm number " + d + "!"; }); 

//Enter  
p.enter().append("p") 
.text(function(d) { return "I'm number " + d + "!"; }) 
.style("color", function(d, i) { 
return i % 2 ? "#000" : "#eee"; 
}); 

Sobald ich jedoch versuche, SVG-Elemente hinzuzufügen, bekomme ich den gleichen Fehler.

Es scheint, als sollte es nur einen Syntaxfehler oder so etwas geben, aber ich habe den Code 5 Billionen Mal durchlaufen und kann nichts finden.

Jede Hilfe wird sehr geschätzt, und danke Ihnen für Ihre Zeit.

Isaac

Answer 1

Sie wollen enter auf das Ergebnis der circle.data nennen statt circle selbst.

var circle = svg.selectAll("circle"); 
circle.data([500,57,112,200,600,1000]).enter().append("circle"); 

Sie taten dies richtig in Ihrem p Beispiel durch die Rückkehr von data in dem p Variable zu speichern. In Ihrem Beispiel circle speichern Sie die Rückgabe von d3.select.selectAll in Ihrer circle Variable.