將外部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綁定到數據

回答

相關問題