Question

社区，

我想将外部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很新（但很有动力）所以请耐心等待我。： - ）

提前感谢您的帮助！

Answer 1

在第一种情况下，您正在执行.selectAll('star')（搜索标记star），这可能应该是.selectAll('#star')（搜索标识为{{1的标记） }}）。

你的第二种方法也可以稍微调整一下。在d3选择上调用star始终返回仅一个节点。因此，后续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); });元素的第一种方法。它可以减少代码，你甚至可以refer to the file containing the star externally，这意味着你不必自己下载和内联SVG（请注意关于IE的警告）。

将外部svg绑定到数据

1 个答案: