D3: update data with multiple elements in a group

by

The key is to handle all the selections, not just the enter selection:

var myGroups = svg.selectAll('g').data(myData);

// enter selection
var myGroupsEnter = myGroups.enter().append("g");
myGroupsEnter.append("line");
myGroupsEnter.append("polygon");
// ...

// update selection -- this will also contain the newly appended elements
myGroups.select("line").attr(...);
// ...

// exit selection
myGroups.exit().remove();

There are two things here that warrant further explanation. First, elements in the enter selection that have had new elements appended merge into the update selection. That is, there is no need to set attributes on the elements in the enter selection if the same thing happens in the update selection. This allows you to append new elements and update existing ones without duplicating code.

The second thing becomes important on subsequent calls with updated data. As the elements you’re binding the data to are not the ones that are actually drawn, the new data needs to be propagated to them. This is what .select() does. That is, by doing myGroups.select("line"), you’re propagating the new data bound to the g elements to their children line elements. So the code to set attributes is the same as for the enter case.

Now you can simply add transitions where desired before setting the new attributes.

Leave a Comment