title: D3: update data with multiple elements in a group
body: <p>I have a combined bar / line chart. For each row in the input file, I create a group that contains multiple elements (lines, rectangles, texts):</p>
  
  <pre><code>var myGroups = svg.selectAll('g').data(myData)
  myGroups.enter().append('g')
  ...
  myGroups.append('line')
  ...
  myGroups.append('polygon')
  ...
  myGroups.append('text')
  ...
  </code></pre>
  
  <p>I currently just</p>
  
  <pre><code>svg.selectAll('*').remove()
  </code></pre>
  
  <p>and create everything from scratch every time the data are updated. However, I'd like to have a smooth transition for all elements.</p>
  
  <p>I've gone through <a href="http://bl.ocks.org/mbostock/3808218" rel="noreferrer">this tutorial</a> several times, but I still don't understand how I can do it in my case.</p>