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