d3 anexar e ingresar problemas

Question

Tengo un problema cuando sigo un tutorial d3 muy simple. Esencialmente estoy tratando de añadir elementos del círculo SVG por enlace de datos para los elementos del círculo SVG actuales luego llamar enter.append como se muestra abajo:

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

¿Qué parece que sería añadir 3 nuevos elementos del círculo (porque ya tengo 3 creado). Sin embargo, en vez de conseguir estos 3 nuevos elementos del círculo añaden, estoy corriendo en este error:

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

he hecho esencialmente la misma cosa con los párrafos, y parece que funciona bien:

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

Sin embargo, tan pronto como trato de agregar elementos SVG en él, continúo recibiendo el mismo error.

Parece que debería haber solo un error de sintaxis o algo así, pero he revisado el código 5 billones de veces y no puedo encontrar nada.

Cualquier ayuda es muy apreciada, y gracias de antemano por su tiempo.

Isaac

Answer 1

que desea llamar enter en el resultado de circle.data en lugar de circle sí.

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

hace esto correctamente en su ejemplo p almacenando el regreso de data en la variable p. Mientras que en su ejemplo circle, está almacenando el retorno de d3.select.selectAll en su variable circle.