cx, cy vs transform in svg and D3, what is the difference?
d3.js, javascript, svg
Solution
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.
Problem
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?