Ah! Deshalb!

Jerome Cukier hat ein Tutorial zu D3 erstellt und ich habe alles mitgemacht, denn er hat mich gleich zu Beginn erwischt.

copy, paste!

I have learned d3 from deciphering script examples and in the earliest ones one ubiquitous construct was this sequence : select / selectAll / data / enter / append.
It does the work, so like everyone else I’ve copied it and reused very often. It happens to be the most proper way of adding new elements in most cases, but the point is, while learning d3, I (and many people before and after me) have copy/pasted it without understanding it deeply.

Im folgenden Zitate, zu Dingen, die ich mir nie richtig klar waren:

styles, attributes, properties

Style refers to the appearance of elements, attributes, to their structure, and properties, to what can be changed in realtime, like values in a form.

d in a function

We write the function with an argument: d. What is d? it’s nothing but a convention. We can call it anything. d is standard fare in d3 code because that’s the writing style of Mike Bostock, the author of the framework and of many of its examples.


Then, we use the enter() statement. What it does is that it prepares one new element for every unmatched data item. We’ll expand a bit later on the true meaning of unmatched, but for the time being, let’s focus on the difference. We have 0 elements, but 3 data items. 3 – 0 = 3, so the enter() selection will prepare 3 new elements.

What does prepare means? the elements are not created yet at this stage, but they will with the next command. Right after enter(), think of what’s created as placeholders for future element (Scott’s vocabulary), or buds that will eventually blossom into full-fledge elements (mine).


exit() is pretty much to enter() what remove() is to append(). Kind of. (…)
selectAll(“p”).exit() won’t work. You’ll have to re-specify the data match.

Schreibe einen Kommentar