Inheritance in data joins

Question

Quick question about data joining. Say I have some elements that each contain a . When I initially join the data to the , it is automatically inherited by the elements I append to the enter selection.

When the data is changed and I rebind it to I was expecting that the elements would pick up the new data but this didn't happen.

To handle this I needed to explicitly rebind the data at the lower level like this:

gElements.selectAll("circle")
    .data(function(d) { return [d]; }
    .enter().append("circle");

This handles both the creation case and the subsequent re-bind. But it seems kind of redundant as returning [d] is essentially what happens automatically with the initial inheritance of data from the parent element.

Is this approach the right way to handle this, or am I getting confused somewhere here?

Answer 1

When you bind data to elements via selection.data, it updates the data bound to those elements. However, it does not automatically propagate the new data to descendent elements; you must do this yourself.

When you call selection.select, which is counterpart to selection.append, data from the parent is bound to the selected child for each selected element. When you call selection.selectAll, data is not bound, so you must subsequently call selection.data to bind new data to children.

It's difficult to answer your question without seeing more context. If you have updated the data on gElements, and each G element contains one circle, you can propagate the data from parent G to child circle using selection.select:

gElements.select("circle");

The code snippet you wrote would be used only if you want to create one new circle, if the circle is missing. This is described in Thinking with Joins. The exact code that you would write might depend on whether it is going to be executed on both enter and update, or just on update.