在HTML中定義的SVG標籤vs由D3添加

Question

我一直在使用 http://bl.ocks.org/mbostock/4063570 作爲指導，試驗D3的集羣功能。

如果我仔細複製示例，它可以正常工作，就像我見過的所有其他D3 SVG示例一樣，SVG元素是由D3創建的。

我所做的改變給我帶來麻煩，是爲了將多個D3圖形插入靜態HTML中定義的佈局。

當我得到D3將元素添加到在HTML中已經定義的SVG標記實驗： 結果接近，但並不總是足夠接近。

檢查創建的DOM元素，區別很明顯。

可以正常工作的代碼的代碼包括：

var svgGraphic = d3.select("body").append("svg") 
    .attr("width", totalWidth) 
    .attr("height", totalHeight) 
    .append("g").attr("transform", "translate(80,0)"); 

這（加上這裏沒有顯示幾行）導致DOM元素的層次結構類似於以下內容：

<svg width="600" height="200"> 
    <g transform="translate(80,0)"> 
     <path class="link" d="M0,100C95,100 95,50 190,50"> 
     <path class="link" d="M0,100C95,100 95,150 190,150"> 
     <g class="node" transform="translate(0,100)"> 
     <g class="node" transform="translate(190,50)"> 
     <g class="node" transform="translate(380,25)"> 
    </g> 
</svg> 

當代碼更像是：

var svgGraphic = d3.select("#graphic"); 
svgGraphic.append("g").attr("transform", "translate(80,0)"); 

路徑和節點元素不嵌套在冷杉T「G」標記：

<svg id="graphic" height="200" width="600"> 
    <g transform="translate(80,0)"> 
    <path class="link" d="M0,100C95,100 95,50 190,50"> 
    <path class="link" d="M0,100C95,100 95,150 190,150"> 
    <g class="node" transform="translate(0,100)"> 
    <g class="node" transform="translate(190,50)"> 
    <g class="node" transform="translate(380,25)"> 
</svg> 

顯然我並沒有試圖關閉摹標籤追加，但它是如何在第一個例子中去呢？

Answer 1

在第一種情況：

var svgGraphic = d3.select("body").append("svg") 
    .attr("width", totalWidth) 
    .attr("height", totalHeight) 
    .append("g").attr("transform", "translate(80,0)"); 

svgGraphic將保留對您在最後一行附加的g元素的引用。

在第二種情況：

var svgGraphic = d3.select("#graphic"); 
svgGraphic.append("g").attr("transform", "translate(80,0)"); 

svgGraphic指你d3.select("#graphic")選擇的svg元件。

因此，如果將元素附加到svgGraphic，它們將被追加到第一種情況下的g元素和第二種情況下的svg元素中。

我相信你想：

var svgGraphic = d3.select("#graphic") 
    .append("g").attr("transform", "translate(80,0)");