1

我一直在使用 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)");

路径和节点元素不嵌套在第一个“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 标记，但是在第一个示例中它是如何到达那里的？

4

1 回答 1

2

在第一种情况下：

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

svgGraphicg将保留对您在最后一行中附加的元素的引用。

在第二种情况下：

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

svgGraphic指svg您使用 选择的元素d3.select("#graphic")。

因此，如果您将元素附加到svgGraphic，它们将被附加到g第一种情况的svg元素和第二种情况的元素。

我相信你想要：

var svgGraphic = d3.select("#graphic")
    .append("g").attr("transform", "translate(80,0)");
于 2013-02-18T19:38:15.867 回答