Highlight edge and attached nodes on click

1

Hi,
Is there an easy way to be able to click in complex graphs (exported as SVG, and embedded in an HTML page) so that the edge clicked is highlighted, as well as the nodes attached to it?

1 Like
2

[easy is in the eye of the beholder]
[when you say highlight, I assume you will accept changing line or fill color]
I know of no “built-in” way to do what you ask, however:

  • CSS seems to support changing colors based on “hover” (not click) (you would use the Graphviz “class” attribute)
  • you can post-process the svg output to add “onclick” attributes to the svg as well as associated javascript. (Easy if you’ve written javascript before, otherwise maybe not)

Here is a link to a similar question with useful answers: Can I make a Digraph node interactive

3

If you include the svg in an html page, you can attach event handlers to svg elements using javascript in the usual way (Element.addEventListener)