javascript code that can be added to an SVG created by Graphviz to make it dynamic when opening in the browser.
The following features are currently added:
-Highlighting: when nodes or edges are clicked they are highlighted. When clicking on a node all connecting edges are also highlighted, making it easier to trace them when there are many edges in a diagram
-zoom in or our on cluster: using the + or - button added to every cluster the drwaing is zooming in or out on the cluster.
The script is also adding a header section to the SVG with several features
-visibility switches: CSS classes can be added in grahviz dot to nodes or edges, all classes are listed in a button which will hide or show all nodes and edges with that class after clicking.
-(April 5th 2024) I am working on making a slider button that can be used to let items appear in the order defined by numerical CSS classes added to edges and nodes. numerical classes can be ordered integer, could be just 1,2,3,... or years. They are dynamically picked up. Will soon be released.
When you have an svg file generated by graphviz you need to edit the file and
change the svg opening tag by adding onload="addInteractivity(evt)", giving something like:
<svg width="2056pt" height="2297pt" viewBox="0.00 0.00 2056.00 2297.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="addInteractivity(evt)">
The content of the svg-script file should be added in front of the closing /svg tag.