1

I have very large generated svg by graphviz tool I am loading as static image then I am adding user interaction by using jquery.graphviz.svg which helps to zoom, highlight and unhighlight nodes but i need to add find me functionality where i am giving search box in UI user will enter node text then it should zoom and scroll to that node (main issue i can not find how much it needs to zoom?) Any idea how should i do it? thanks in advance

Krunal Patel
  • 11
  • 2

1 Answers1

0

We have an extremely similar (closed source) tool. We switched away from jquery.graphviz.svg to svg-pan-zoom to have more control over things like this and because of performance issues with the lib. So life may get a little easier if you have the opportunity to do so.

The general pan-to-node algorithm we use is:

  1. Use getClientBoundingRect() to figure out the observed height/width of your node.
  2. Base your zoom factor on the ratio between the above and your target size. Eg: it's 50px wide right now, but you want 200px, so you need to zoom 4x more.
  3. Execute the zoom, then recheck client-bounding-rect for the post-zoom position.
  4. Pan over to place the node at (0, 0) + half your viewport size.

Note that you really want to do 3. and 4. as separate, serial steps. Depending on what the library is zooming towards and its coordinate system, figuring out how much to pan before executing the zoom can be very complicated and error-prone.

NestedCaveats
  • 71
  • 1
  • 2