title: D3 - How to bind the same data to multiple object?
body: <p>I am trying to draw multiple shapes using the same data in a selection, so let's say I have:</p>
  
  <pre><code>myData = [
      { 
          shape: 'rect',
          attr: { width: 100, height: 100, x: 100, y:100 }
      } , {
          shape: 'circle',
          attr: {cx, cy, etc...}
      }
  ]
  
  node.selectAll('*').data([myData]);
  
  myData.obj.forEach(function(obj) {
      // Append different shapes based on data
      var shape = node.enter().append(obj.shape);
      Object.keys(obj.attrs).forEach(function(attr) {
          // Bind attrs to shapes based on data
          shape.attr(attr, obj.attrs[attr]);
      });
  });
  </code></pre>
  
  <p>Here node is a 'g' element, myData is a single data object. My goal is to modify the child shapes inside the g based on myData, so later if I bind another myData and call this function again, they can be updated. But I believe somehow myData is only bound to the first appended shape. Is there a way to easily bind the same data to multiple shapes?</p>