Question

I want to scale and translate D3 force graph, both at the same time. E.g. On clicking a button it shoud scale to 400% and then make itself center on the screen. This should all happen with a smooth animation effect.

//animate vis to visible area 
vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + someScaleValue + ")" + "center("0,0)");

Doing this, scaling works fine, but graph is not centered. It shifts towards right-bottom corner.

vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + someScaleValue + ")");

Why is scale is getting reset to 100% when I translate it second time.

I also tried using:

vis.transition()
    .duration(2000)
    .attr("transform", "scale(" + scaleValue + ")" + "translate(0,0)");`

This is not working too. Please help me.

Answer 1

center(0,0) is not a valid transform-definition to be used with transform, as per the spec.

If you want translate(0, 0) to take the object to the center of the screen (usually the top-left corner of vis), then you might want to set viewBox of the outer svg element to be: "-width/2 -height/2 width height". This would set the co-ordinate system inside the svg element such that the center lies at (0, 0). Alternatively, you can use translate(width/2, height/2).

Also, each time you call .attr('transform', ...), you overwrite the old value of the transform attribute. This is the possible reason why you are losing the original scaling on translating. The best solution would be to put the vis element inside a g which has the scaling in the transform attribute which remains constant.