SVG nodes in D3 force layout moves on node scale

问题

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/

回答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

回答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

来源：https://stackoverflow.com/questions/23622510/svg-nodes-in-d3-force-layout-moves-on-node-scale