SVG nodes in D3 force layout moves on node scale

Question

I am trying to scale nodes (circle tags) in D3 force layout with CSS, like this

circle:hover {
  -webkit-transform: scale(1.5, 1.5);
}

The node is scaled, but it also moves away from upper left corner the same amount, like the whole layer was scaled. Nothing else (except the node) is scaled however.

I have no example to show at the moment. I would be glad for suggestions about what is going on there.

I got the idea from the answer by Jonathan Sewell here:

Style SVG circle with CSS

UPDATE: I forked a fiddle and added the transform. So here is a live example: http://jsfiddle.net/UagSD/3/

Answer 1

You may want to specify in your CSS the transform origin point like this (with the vendor prefixed versions if you need it) :

transform-origin: center center

Answer 2

I don't think that you can do it with css because the radius cannot be set with css.But you can do it using d3 mouseover and mouseout event as below

 var nodes =svg.selectAll(".node")
                .data(data)
                .enter().append("circle")
                .attr("class", "node")
                .attr("r", 40)
                .on("mouseover", function(d){d3.select(this).transition().attr("r",60)})
                .on("mouseout", function(d){d3.select(this).transition().attr("r",40)})
                .call(force.drag);

Here http://jsfiddle.net/N99Az/ is the fiddle