title: How can I clone and modify an existing group into a selection?
body: <p>I have an existing SVG with a complex group template. I want to reuse and multiply it in the context of some data (<code>selection.data().enter()</code>)</p>
  
  <pre><code>&lt;svg&gt;
  &lt;g id="template"&gt;
    *** complex inner ***
  &lt;/g&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>I want to clone this #template with D3 according to some data, but I want to modify each clone according to the data:</p>
  
  <pre><code>d3.select("svg").selectAll('g')
          .data(['red', 'blue', 'yellow', 'lime']).enter()
          .append(***A CLONE OF MY TEMPLATE****)
          .select(***SOMETHING IN MY COMPLEX INNER***)
          .attr('fill', function(d){return d;})
  </code></pre>
  
  <p><a href="http://fiddle.jshell.net/XQcw8/2/" rel="nofollow noreferrer">Here</a> is a fiddle that multiplies the clones with the data, but I cannot modify the fill color of the first rectangle, for instance </p>
  
  <p>The <code>&lt;use&gt;</code> tag is not useful because it refers element, but you cannot modify inner elements without modifying all the instances like in <a href="https://stackoverflow.com/questions/17573896/how-do-i-clone-an-element-or-chunk-of-dom">this SO question</a></p>
  
  <p>In fact I want to do the same as in <a href="http://www.w3.org/TR/2009/WD-SVGParamPrimer-20090616/" rel="nofollow noreferrer">this proposal</a> with D3.
  How can I do this?</p>