Bind external svg to data - svg

Question

Community,
I would like to bind an external svg file to my data-array.
I loaded the element into my dom like this:
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);
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.
d3.select("body").select("div#divCombiSVG")
.selectAll("star")
.data(combiData)
.enter()
.append("svg:use")
.attr("xlink:href", "#staricon");
I don't see the svgs.
I have also tried this:
d3.select("body").select("div#divCombiSVG")
.selectAll("star")
.data(combiData)
.enter()
.append("svg")
.attr("width",200)
.attr("height",200)
.node().appendChild(icon);
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.
The svg file looks like this:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904 /DTD/svg10.dtd">
<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">
<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"></path>
</svg>
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. :-)
Thanks in advance for your help!

Answer 1

In the first case, you are doing a .selectAll('star') (searching for the tag star), which probably should have been a .selectAll('#star') (searching for a tag with id star).
Your second approach can be tweaked a little to work as well. Calling node() on a d3 selection always returns just one node. Hence, the subsequent .appendChild happens only on the first node.
You can try this, if you find this more amenable to what you wanted to do:
d3.select("body").select("div#divCombiSVG")
.selectAll("star")
.data(combiData)
.enter()
.append("svg")
.attr("width",200)
.attr("height",200)
.each(function (d) {
this.appendChild(icon);
});
Since in the comments you asked for which option to prefer: I would recommend the first approach of using the use element. It results in less code and you can even refer to the file containing the star externally which means that you will not have to download and inline the SVG yourself (note the caveat about IE).