title: Bind external svg to data
body: <p>Community,</p>
  
  <p>I would like to bind an external svg file to my data-array. </p>
  
  <p>I loaded the element into my dom like this:</p>
  
  <pre><code>                defs = d3.select("defs");
                  d3.html("combisymbol.svg", function(data) {
                  //get a selection of the image so we can pull out the icon
                  xml = d3.select(data); 
                  icon = document.importNode(xml.select("#star").node(), true);
                  icon.id = "staricon";
  
                  defs.node().appendChild(icon);
                 // console.log("icon", icon);
  </code></pre>
  
  <p>Then I tried to make it visible. I used the same approach as when I take circles that I bind to my data. With the circles it works, but my external svg is not visible.</p>
  
  <pre><code>            d3.select("body").select("div#divCombiSVG")
                      .selectAll("star")
                      .data(combiData)
                      .enter()
                      .append("svg:use")
                      .attr("xlink:href", "#staricon");
  </code></pre>
  
  <p>I don't see the svgs.</p>
  
  <p>I have also tried this:</p>
  
  <pre><code>d3.select("body").select("div#divCombiSVG")
                      .selectAll("star")
                      .data(combiData)
                      .enter()
                      .append("svg")
                      .attr("width",200)
                      .attr("height",200)
                      .node().appendChild(icon);
  </code></pre>
  
  <p>But then the icon gets only added to the first data-element and not the second. Even though it's added to the first, it's still not visible.</p>
  
  <p>The svg file looks like this:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904          /DTD/svg10.dtd"&gt;
   &lt;svg version="1.0" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   width="200px" height="200px" viewBox="0 0 37.207 100" enable-background="new 0 0 37.207 100"
   xml:space="preserve"&gt;
  
  &lt;path xmlns="http://www.w3.org/2000/svg" id="star" cx="50" cy="50" r="20" r2="43" 
  orient='point'     points='3' radial-shift='0' outerCurve='86' 
  outerOffset='4.1' innerCurve='56' innerOffset='2.2' d="M300,168 
  C347.7790400396858,178.49361334198113 
  345.7070270919484,217.64466544113793 337.23909236273084,228.5 
  C350.87405522189334,226.59422068634012 385.8158673985199,244.3753308862077 371.014083110324,291
  C338.0368273588341,327.1310557718112 
  305.1670281299449,305.76111387252195 300,293 C294.83297187005513,305.76111387252195    
  261.9631726411659,327.1310557718112 228.98591688967605,291 C214.1841326014801,244.37533088620776
  249.12594477810666,226.59422068634015 262.7609076372691,228.50000000000003 
  C254.29297290805158,217.64466544113793 252.22095996031422,178.4936133419811 300,168 " 
  fill="yellow" stroke="black" stroke-width="2"&gt;&lt;/path&gt;
  
  &lt;/svg&gt;
  </code></pre>
  
  <p>combiData currently has two objects.
  I have looked for hours at other examples but I can't make it work. I think I'm close though...I'm pretty new to d3 (but very motivated) so please be patient with me. :-)</p>
  
  <p>Thanks in advance for your help!</p>