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

Question

I m working on a forced layout and couldnT figure out why trying to move the nodes via cx, cy does not work.

// 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; });

The nodes are in a svg g element actually, might that be why?

Answer 1

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

Some more explanation: the element-specific attributes cx, cy, x, y, etc. position the element within the coordinate system. The transform attribute repositions the coordinate system. For elements that do not have specific position attributes, this is the only way of positioning.