score:1

Accepted answer

When you do this:

svg.append("text")
   .attr("transform", "translate(100,0)")
   .attr("x", 50)
   .attr("y", 50)
   .attr("font-size", "24px")
   .text(heading)

You are appending a <text> element to the SVG (and the svg selection). So far, so good.

Now comes this:

svg.selectAll("text")
    .data(data)
    .enter()
    //etc...

And this is what's happening: as you are selecting all <text> elements, you are in fact selecting that first one we mentioned, and binding data to it. Because of that, your enter selection has n - 1 elements.

For a better explanation, please see my explanation here: Selecting null: what is the reason behind 'selectAll(null)' in D3.js?

Solution: Select nothing...

svg.selectAll(null)
    .data(data)
    .enter()
    //etc...

... or, if you plan to have an update selection, select by a given class.


Related Query

More Query from same tag