D3强制定向：为什么在显示标签时需要变换 - 翻译

Question

我正在查看带有节点标签的D3力导向图的samples，我意识到对于tick函数，控制节点和标签移动的函数使用了transform-translate方法：< / p>

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函数中独立调整它们的位置。但是，在这种情况下最好对元素进行分组。