将外部svg绑定到数据

我想将外部svg文件绑定到我的数据数组。

我装的元素插入我的DOM是这样的：

   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);

然后我试图使其可见。我使用与将数据绑定到圈子时相同的方法。使用它的圆圈，但我的外部svg不可见。

  d3.select("body").select("div#divCombiSVG") 
        .selectAll("star") 
        .data(combiData) 
        .enter() 
        .append("svg:use") 
        .attr("xlink:href", "#staricon");

我没有看到svgs。

我也试过这样：

d3.select("body").select("div#divCombiSVG") 
        .selectAll("star") 
        .data(combiData) 
        .enter() 
        .append("svg") 
        .attr("width",200) 
        .attr("height",200) 
        .node().appendChild(icon);

但随后的图标就会只添加到第一个数据元素，而不是第二。即使它被添加到第一个，它仍然不可见。

SVG文件看起来是这样的：

<?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目前有两个目标。我已经找了几个小时在其他例子，但我不能让它的工作。我认为我很接近，虽然...我对d3很新（但很有动力），所以请耐心等待我。 :-)

在此先感谢您的帮助！

来源

2014-10-10 Julia Jürgens

该svg被破坏，所以这可能是第一个问题。它正在绘制视口外的路径。再加上它不是明星，如果这很重要的话。 – Anthony 2014-10-10 14:38:53

还要设置use元素的x和y属性。 – Anthony 2014-10-10 14:41:45

这很奇怪。我可以很好地看到它<使用xlink：href =“＃star”transform =“translate（200,200）scale（.5，.5）”>（star is the former id） – 2014-10-10 14:42:40

在第一种情况下，你正在做一个.selectAll('star')（搜索标签star），这可能应该是一个.selectAll('#star')（搜索与ID star标签）。

你的第二种方法可以调整一点，以及工作。在d3选择上调用node()总是返回只是一个节点。因此，后续.appendChild只发生在第一个节点上。

你可以试试这个，如果你觉得这更适合于你想要做什么：

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); 
       });

由于在评论你问到更喜欢哪个选项：我会建议第一种方法使用use元素。它会减少代码，你甚至可以使用refer to the file containing the star externally这意味着你不必下载和内联SVG（注意关于IE的警告）。

来源

2014-10-10 21:49:25

非常感谢您的回答。我认为selectAll命令只是为即将到来的元素保留空间，但它不会选择任何“真实”元素。这就是为什么我只是将它命名为明星，这导致我问题，如果我给这个空选择的名称是任意的？ – 2014-10-13 09:00:44

'd3.selectAll'接受一个CSS3选择器并允许通过'.data'方法将一个数组连接到一个数组。在连接之后，选择中有三种元素：1.需要为新数据元素创建的元素（'enter'集合），2.更新了数据的元素（更新集合）和3.因为相应的数据已经消失而需要删除的元素（'exit'设置）。因此，'selectAll'确实保留空间，但这只是它所做的一部分，选择不是_named_，尽管它通常被赋予了描述性的类名。 – 2014-10-13 20:29:39

将外部svg绑定到数据

回答

相关问题