d3js: make new parent data descend into child nodes

Question

I can\'t work out how best to pass changes to the data which occur at a parent node (e.g. an SVG g element) down to it\'s children (e.g. SVG circle

Answer 1

There are 2 ways to propagate the data from parents to children:

1. selection.select will do this implicitly. (The implementations of selection.append and selection.insert are actually based on selection.select internally)

   svg.selectAll("g").select("circle")
   

2. You can explicitly redo the data join using a function to receive the parent data and return it in an array for the child.

   svg.selectAll("g").selectAll("circle")
       .data(function(d) { return [d]; });
   

These amount to the same thing. The first option relies on some special behaviour in select so it can be a bit surprising at first, but it is nice in that it makes the pattern for node update symmetrical with the pattern for node creation via insert/append. The second option is useful if you need to apply any changes to the data as it is being propagated.

Here's another article you didn't link to that might be useful also: Thinking with Joins