D3 force-directed：为什么在显示标签时需要 transform-translate tick

Question

我正在查看 samples 带有节点标签的 D3 力导向图，我意识到对于 tick 函数，控制节点和标签移动的函数使用了转换-翻译方法:

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

当节点是单个形状元素时，我们只是在tick函数中调整它的位置属性。例如。如果它是一个圆，我们更新它的 cx 和 cy 属性。

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