Zooming to a clicked node on a D3 Force Directed Graph

2
votes

I am trying to apply the van Wijk Smooth Zooming example to a D3 force-directed graph I am working that already has the drag+zoom functioning on it. However, I don't know how to get my current position in order to make that the starting point of the transform. The I have the same issue with trying to use a normal transform.

I also tried looking at the click-to-zoom-transform but I wasn't sure how to apply that to a force-directed graph.

There are a couple things I want to apply it to, including being able to zoom and jump to a link's target node when I click on the link. Is there a way to get the current screen screen position so I could use it as a starting point to jump to where I want to go?

1
javascriptd3.jszoomingforce-layout
Assuming you have a "standard" force layout, the position of the target node would be [d.target.x, d.target.y], where d is the data bound to the link. - Lars Kotthoff
Yes, I am using a "standard" force layout. I understand how to get the target x and y but to be able to transition to there, don't I have to know my current location? How do I get my current location on the map so I can jump from that to the target x and y? - Rozgonyi
How are you transitioning? If you just call .transition().attr("transform", ...) on the element, you don't need to know the current position. - Lars Kotthoff
Thanks for your comments. I looked back at the way I was transitioning and figured it out. See my answer below. - Rozgonyi
for example force-directed graph with click-node-to-zoom - Mila Nautikus

1 Answers

4
votes

Actually, I just figured it out based on the clicked function in this example. My equation was wrong for my scale and translate numbers. I needed to get my translate numbers this way:

translate = [width / 2 - scale * x, height / 2 - scale * y]

Then I needed to call() the zoom behavior with the transition on the zoom behavior itself like below with the ".event" at the end to make it fire:

svg.transition().duration(750)
   .call(zoom.translate(translate).scale(scale).event);

and not doing it the wrong way by translating the svg like I was doing before:

svg.transition().duration(750)
   .attr("transform", translate(translate).scale(scale));