d3.js - Bind external svg to data -

-

community,

I want to attach an external SVG file to my data-array.

I have loaded this element in my dom: 

  defs = d3.select ("defs"); Get a selection of D3.html ("combisymbol.svg", function (data) {// so that we can remove the icon xml = d3.select; icon = document.importNode (xml.select ("(" Icon ", icon);    ago> 
 Then I tried to make it visible. I used the same way when I circle that I bind to my data This works with circles, but my external SVG is not visible.  
  
 I do not see svgs.  
 I also try Select:  
 Select ("div # divCombiSVG") .selectAll ("star"). Data (CombinedData) .enter () .append ("svg") .attr ("width", 200 ) .attr ("height", 200) .node (). AppendChild (icon);   
 But then the icon is only added to the first data-element and not the second, though it is an FIR Has been added to  
  & lt ;? Xml version = "1.0" encoding = "UTF-8"? & Gt; & Lt ;! DOCTYPE svg PUBLIC "- // W3C // DTD SVG 1.0 / n" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> & 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 "visible box =" 0 0 37.207 100 "enabled-background =" new 0 0 37.207 100 "xml: space =" protected "& gt; & Lt; Path xmlns = "http://www.w3.org/2000/svg" id = "star" cx = "50" cy = "50" r = "20" r2 = "43" Orient = 'dot' point = '3' radial-shift = '0' external query = '86 'outeroffet =' 4.1 'inverter =' 56 'internal offset =' 2.2 'D = "M 3000068 C347.7790400396858,178.49361334198113 345.7070270919484,217.64466544113793 337.23909236273084,228.5C 350 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" touch Trok = "black" stroke-width = "2" & gt; & Lt; / Path & gt; & Lt; / Svg & gt;   
 There are currently two objects in Cognizanta. I've looked at other examples for hours but I can not work it. I think I'm close ... I'm very new to D3 I am (but very motivated) so please be patient with me. : -)  
 Thank you in advance for your help!   
 
 
 In the first case, you can specify a  .selectAll ('star')  ( Tag  star ), which was possibly supposed to be a  .selectAll ('# star')  (with ID  Star ) Searching for tags.)  
 Your second method may also touch a bit to work. Calling on D3 selection  node ()  always  only one node , therefore, later on  .appendChild  occurs only on the first node.  
 You can try it, if you are more qualified to do this then what do you want to do: