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?

回答1:

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

来源：https://stackoverflow.com/questions/25225069/zooming-to-a-clicked-node-on-a-d3-force-directed-graph