Javascript HTML中定义的SVG标记与D3添加的SVG标记

我一直在试验D3的集群功能，使用 作为向导

如果我仔细复制这个示例，它可以正常工作，就像我看到的所有其他D3SVG示例一样，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>

路径和节点元素未嵌套在第一个“g”标记内：

显然，我没有尝试附加结束g标记，但在第一个示例中它是如何到达那里的呢？

在第一个示例中：

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选择的
svg
元素。选择（“图形”）

因此，如果将元素附加到

svgGraphic

，在第一种情况下，它们将附加到

g

元素，在第二种情况下，它们将附加到

svg

元素

我相信你想要：

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

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

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