CODEWITHSUNDEEP
javascriptd3.jszoomingforce-layout
Rozgonyi
Rozgonyi

Reputation: 1059

Zooming to a clicked node on a D3 Force Directed Graph

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?

Upvotes: 2

Views: 4059

Answers (1)

Rozgonyi
Rozgonyi

Reputation: 1059

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));

Upvotes: 4

Related Questions