Question

So I am having a problem when following a very simple d3 tutorial. Essentially I am attempting to add SVG circle elements by binding data to the current svg circle elements then calling enter.append As shown below:

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

Which seems like it would add 3 new circle elements (because I already have 3 created). However, instead of getting these 3 new circle elements added, I am running into this error:

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

I have done essentially the same thing with paragraphs, and it seems to work fine:

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

However as soon as I try to add SVG Elements into it, I continue to get the same error.

It seems like there should be just a syntax error or something, but I have gone through the code 5 trillion times, and can’t find anything.

Any help is much appreciated, and thank you before hand for your time.

Isaac

Answer 1

You want to call enter on the result of circle.data instead of circle itself.

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

You did this correctly in your p example by storing the return of data in the p variable. Whereas in your circle example, you are storing the return of d3.select.selectAll in your circle variable.