How to insert javascript action on generated svg ?



I use graphviz to generate svg file and I would like to add some action. As "mouseover" event describes in svg spec .

How to do this ?



You want to set the id

You want to set the id attribute of the nodes and edges you wish to make active. You can then post-process the svg file and add the actions you want by using the svg element id as a key. However, a simpler approach is to do this dynamically using, say, javascript. For example, I have a graph with node

  abnorm [id=abnorm]

In svg, this becomes

	<g id="abnorm"...>

From the graph I also generate a javascript dictionary

  var nodedata = new Dictionary ({
    'abnorm' : ['53','0.0076','0.1047','151','0.0031','0.0177'],

I then use javascript code like

    nodedata.each(function(name, value) {
      // Get one of the SVG items by ID;
      var svgItem = document.getElementById(name);
      svgItem.setAttribute("onmouseover", "parent.doNodeData('"+name+"')");

to attach an action.



Recent comments