1

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/

Community
  • 1
  • 1
Leo
  • 4,136
  • 6
  • 48
  • 72

2 Answers2

3

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
Delapouite
  • 9,469
  • 5
  • 36
  • 41
  • Thanks @Delapouite! That seems to work very nicely. (And I guess it will make it into the standards. Seems very useful and intuitive.) – Leo May 13 '14 at 11:23
  • I am still confused however. Please see this example (from Sewell): http://jsbin.com/sozewiso/2/edit. Why does that example work without `transform-origin`? Is that because the circles are placed with `translate`, or? – Leo May 13 '14 at 12:10
0

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

Roshan
  • 2,144
  • 2
  • 16
  • 28
  • Thanks, using javascript instead is an option, of course. But please see the answer by Sewell (or my fiddle above). The problem here is not that the radius can not be changed, but that the origin moves when scale(...) is used. – Leo May 13 '14 at 11:17