Cx, cy vs transform in svg and D3, what is the difference?

Question

I am working on forced linking and could not understand why trying to move nodes through cx, cy does not work.

// This works node.attr("transform", function(d) { return "translate(" + dx + "," + d. //This doesn't node.attr("cx", function(d) { return dx; }) .attr("cy", function(d) { return dy; }); 

The nodes are in the svg g element, which is probably why?

Answer 1

The cx and cy attributes only work for circle elements. For g elements, use transform .

Another explanation: attributes specific to the element cx , cy , x , y , etc. position the element in the coordinate system. The transform attribute repositions the coordinate system. For elements that do not have specific position attributes, this is the only way to position.