CODEWITHSUNDEEP
javascriptd3.js
Federico
Federico

Reputation: 3920

Difference between select().append() and select().data().enter().append()?

If I have this HTML:

<body>
  <div class="parent">
  </div>
</body>

And execute this code:

d3.select('div')
    .append('span')
    .html("I'm appended to div.parent")

This is my resulting HTML

<body>
  <div class="parent">
    <span>I'm appended to div.parent</span>
  </div>
</body>

But, if I execute this code:

d3.select('div')
    .data([0,1]).enter() // This line of code was added. 
    .append('span')
    .html("I'm appended to document")

The span gets appended to the HTML document. 

<body>
  <div class="parent">

  </div>

</body>
<span>I'm appended to document</span>

I know that selectAll() redefines the parent element, so my question is not why the second statement does not work, but why does the first one works? According to this logic,d3.select('div').append('span') should not redefine the parent element and append the span to the document element. Why is this not so?

Upvotes: 4

Views: 941

Answers (1)

nkorth
nkorth

Reputation: 1694

The append method simply appends something inside each selected element, making the first example fairly intuitive.

For the second example, you know that the enter call returns a selection filled with "placeholders" for each new element that needs to be added based on the data. But "placeholders" doesn't really explain what's happening. The documentation for .enter() explains:

Another way to think about the entering placeholder nodes is that they are pointers to the parent node (in this example, the document body); however, they only support append and insert. Once elements have been inserted, their indices will reflect the new positions and not necessarily start from zero or be continuous.

So, in both examples, the parent node is still <body>, simply because you haven't chained two or more select/selectAll calls. The difference between them is what's being appended to - the selected <div> in the first example, and the original selection's parent node in the second example.

Thanks for the good question, by the way; it made me think more about how and why this stuff works, not just what it does.

Upvotes: 4

Related Questions