Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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?

like image 517
Orkun Ozen Avatar asked May 24 '14 20:05

Orkun Ozen


1 Answers

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.

like image 65
Lars Kotthoff Avatar answered Sep 23 '22 10:09

Lars Kotthoff