Accepted answer

When you do this:

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

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

Now comes this:


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...


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

Related Query

More Query from same tag