javascript - HTML 中定义的 SVG 标签与 D3 添加的标签

Question

我一直在尝试使用 D3 的集群功能 http://bl.ocks.org/mbostock/4063570作为指南。

如果我仔细复制示例，它工作正常，就像我看到的所有其他 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)");

路径和节点元素未嵌套在第一个“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>

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

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