DOM不代表d3强制布局的html结构答案

【问题标题】：DOM does not represent the html structure of d3 force layoutDOM不代表d3强制布局的html结构
【发布时间】：2016-01-25 09:12:53
【问题描述】：

我想创建一个 SVG 组来在其中存储节点和文本。我生成的 HTML 如下所示：

<g class="node" cx="946.6911642155153" cy="434.4579018064595">
    <circle class="circle" r="4.5" />
    <text dx="12" dy="0.35em">Harry Potter</text>
</g>

然而，节点和文本卡在左上角。我尝试从this question on SO 构建它。

我的代码如下所示：

function draw() {    
    node = svg.selectAll(".node");
    node = node.data(force.nodes(), function(d) { return d.id;});
    var gnode = node.enter().append('g').attr("class", "node");
    gnode.append("circle").attr("class", "circle").attr("r", 4.5);

    gnode.append("text")
    .attr("dx", 12)
    .attr("dy", ".35em")
    .text(function(d) { return d.name });

    force.start();
}

可以在此处找到working demo。我怀疑我必须将gnode 推送到force.nodes()，但我不是 100% 确定。

【问题讨论】：

标签： javascript d3.js svg

【解决方案1】：

您的 SVG 不正确，因为属性 cx 和 cy 对 g 元素无效。它们仅适用于circle 元素。

要放置组元素，您可以使用转换来转换g。对 tick 函数进行简单更改即可解决此问题：

function tick() {
    node.attr("transform", function(d) {
        return "translate(" + d.x + " " + d.y + ")";
    });
//    node.attr("cx", function(d) { return d.x; })
//        .attr("cy", function(d) { return d.y; });

    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });
}

【讨论】：