d3.js - D3: update data with multiple elements in a group -

i have combined bar / line chart. each row in input file, create group contains multiple elements (lines, rectangles, texts):

var mygroups = svg.selectall('g').data(mydata) mygroups.enter().append('g') ... mygroups.append('line') ... mygroups.append('polygon') ... mygroups.append('text') ... 

i just

svg.selectall('*').remove() 

and create scratch every time data updated. however, i'd have smooth transition elements.

i've gone through this tutorial several times, still don't understand how can in case.

the key handle selections, not 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 -- contain newly appended elements mygroups.select("line").attr(...); // ...  // exit selection mygroups.exit().remove(); 

there 2 things here warrant further explanation. first, elements in enter selection have had new elements appended merge update selection. is, there no need set attributes on elements in enter selection if same thing happens in update selection. allows append new elements , update existing ones without duplicating code.

the second thing becomes important on subsequent calls updated data. elements you're binding data not ones drawn, new data needs propagated them. .select() does. is, doing mygroups.select("line"), you're propagating new data bound g elements children line elements. code set attributes same enter case.

now can add transitions desired before setting new attributes.