javascript - svg 和 D3 中的 cx、cy vs 变换，有什么区别？

Question

我正在研究 forced layout并且无法弄清楚为什么尝试通过 cx 移动节点，cy 不起作用。

// This works    
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.

//This doesn't
    node.attr("cx", function(d) { return d.x; })
                    .attr("cy", function(d) { return d.y; });

节点实际上在 svg g 元素中，这可能是原因吗？

Answer 1

cx 和cy 属性仅适用于circle 元素。对于 g 元素，使用 transform。

更多解释:元素特定的属性cx、cy、x、y等。将元素放置在坐标系中。 transform 属性重新定位坐标系。对于没有特定位置属性的元素，这是唯一的定位方式。