Data Connection Inheritance

Question

Quick question about data connection. Let's say I have some elements, each of which has a. When I first join the data, it is automatically inherited by the elements that I add to the input selection.

When the data changes, and I rewrite it, I expected the elements to receive new data, but this did not happen.

To handle this, I needed to explicitly reconfigure the data at the lower level as follows:

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

This handles both the creation case and the subsequent re-binding. But this seems unnecessary, since the return of [d] is mainly automatic with the initial inheritance of data from the parent element.

Is this approach the right way to handle this, or am I embarrassed somewhere?

Answer 1

When you bind data to elements through selection.data , it updates the data bound to these elements. However, it does not automatically propagate new data to hereditary elements; you have to do it yourself.

When you call selection.select , which is the equivalent of selection. append , data from the parent is tied to the selected child for each selected item. When you call selection.selectAll , the data is not bound, so you should subsequently call selection.data to bind the new data to the children.

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

 gElements.select("circle"); 

The code icon that you wrote will only be used if you want to create one new circle, if this circle is missing. This is described in Thinking with Inserts . The exact code you write may depend on whether it will be executed both for input, for updating, or just for updating.