HTML 中定义的 SVG 标签与 D3 中添加的标签答案

【问题标题】：SVG tag defined in HTML vs Added by D3HTML 中定义的 SVG 标签与 D3 中添加的标签
【发布时间】：2013-02-03 08:03:09
【问题描述】：

我一直在尝试使用 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 标记，但它是如何在第一个示例中到达那里的？

【问题讨论】：

标签： javascript d3.js

【解决方案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)");

【讨论】：