Can someone explain like i'm 5 how this D3 syntax actually works?

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');

What it seems to do is just append links to the tree.

But how I read that is "select everything that is of class link, and append an attribute class=link". How it can select before those exist is puzzling.

Why is there a "select" before the items actually exist? Does select really mean "insert"?

Can someone explain like i'm 5 how this D3 syntax actually works?

var link = svg.selectAll('.link')
    .data(links)
    .enter().append('line')
    .attr('class', 'link');

What it seems to do is just append links to the tree.

But how I read that is "select everything that is of class link, and append an attribute class=link". How it can select before those exist is puzzling.

Why is there a "select" before the items actually exist? Does select really mean "insert"?

• javascript
• d3.js

• 3 This link has step by step explanation - dashingd3js./binding-data-to-dom-elements – Gilsha Commented Aug 31, 2016 at 5:05
• thanks. that does explain it and answers the obvious question that the API is counter intuitive, since it asks "but wait, what?" a few times. neanderthal. – dcsan Commented Aug 31, 2016 at 5:21
• 1 You don't even need the last line .attr("class", ".link") for this to work. Read this: stackoverflow./documentation/d3.js/2135/selections/16948/… – Gerardo Furtado Commented Aug 31, 2016 at 5:24
• This seems to explain it. WAT? Is right. Even the author knew it was confusing as he wrote it... bost.ocks/mike/join – dcsan Commented Aug 31, 2016 at 5:32
• 1 It's confusing at first, but once you understand the core concept, the syntax bees more intuitive. The selectAll('.link') generalizes your use cases for binding data to elements. 1. There are no elements, therefore add all of the data. 2. There are some existing elements, but less than the size of data, so update the existing, and enter the new. 3. There are more existing elements than the size of data, so update the existing, and remove the rest. It's basically a one liner CRUD operation. – Eric Guan Commented Aug 31, 2016 at 6:15

2 Answers 2

Line by line analysis would like below:

Select all the DOMs having class link.

var link = svg.selectAll('.link')

To all those links bind the data. Here data links is an array. links[0] is bound to first DOM if present. links[1] is bound to second DOM if present. ..so on

.data(links)
.enter()

Case 1: If the array links has 2 elements and the selection DOM elements has 0 elements. Then 2 line DOM will be appended to the svg DOM.

Case 2: If the array links has 2 elements and the selection DOM elements has 1 element. Then 1 new line DOM will be appended to the svg DOM.

Case 3: If the array links has 2 elements and the selection DOM elements has 2 or more elements. Then 0 new line DOM will be appended to the svg DOM.

    .append('line')
    .attr('class', 'link');

This would be a good read

I agree that it is totally confusing to have to make a selection before it even exists. BUT by calling data(someDataArray) on the selection, this placeholder selection is now bound to your data.

Now, for everything that will enter the data in someDataArray, d3 will append a corresponding SVG line (and attach the relevant data).

If someDataArray changes, d3 can change the appearance of the attached SVG node with update or even remove the old node that no longer has associated data with exit.