d3.js - D3 force-directed：为什么显示标签时需要转换翻译刻度

Question

我正在查看带有节点标签的 D3 力导向图的样本，我意识到对于刻度函数，控制节点和标签移动的函数使用了变换-翻译方法：

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

而不是通常没有标签的。

nodes.attr({"cx":function(d){return d.x;},
            "cy":function(d){return d.y;}
        });

任何人都可以帮助解释原理吗？谢谢。

Answer 1

当 node 是单个 shape 元素时，我们只需在 tick 函数中调整其位置属性即可。例如。如果它是一个圆，我们更新它的 cx 和 cy 属性。

但是当我们有多个元素要显示在相同或相对位置时，我们使用<g>element 对元素进行分组并将位置属性应用于<g>元素。g元素的位置属性是transform。我们可以创建不同类型的元素（此处为圆形和文本）并在刻度功能中独立调整它们的位置。但是，在这种情况下最好对元素进行分组。