Widget:GraphInteractivity

<script type="text/javascript"> (function( ) { "use strict";

var g_graphs; var g_selectedNode = null; var g_coloredNodes;

document.addEventListener( "load", function()
{
 g_graphs = document.querySelectorAll( "svg > g.graph" ); g_coloredNodes = [ [ g_graphs[0].querySelector( "g#h4" ), "green" ] ];

g_graphs.forEach( function( _graph ) { _graph.querySelectorAll( "g[id] > *" ).forEach( function( _gNode ) { if ( _gNode.tagName === "polygon" || _gNode.tagName === "ellipse" ) _gNode.style.fill = "rgba( 255,255,255,1)"; } );

_graph.addEventListener( "mousemove", onMouseMove ); _graph.addEventListener( "mousedown", onMouseDown ); } ); } );

function onMouseMove( _event ) { var node = _event.target; while ( node && !node.id ) node = node.parentNode;

decorateNodes( g_coloredNodes.concat( [ [g_selectedNode, "lightskyblue" ], [ node, "lightsteelblue" ] ].reverse() ).reverse() ); }

function decorateNodes( _arrNodeColors ) { g_graphs.forEach( function( _graph ) { _graph.querySelectorAll( "g[id] > *" ).forEach( function( _gNode ) { if ( !_arrNodeColors.some( function( _nodeColor )
 { if ( _nodeColor[0] && _nodeColor[0].getAttribute( "class" ) !== "graph" && _gNode.parentNode.id === _nodeColor[0].id ) return _gNode.style.stroke = _nodeColor[1]; return false; } ) ) _gNode.style.stroke = ""; } ); } );
}

function onMouseDown( _event ) { g_selectedNode = _event.target; while ( g_selectedNode && !g_selectedNode.id ) g_selectedNode = g_selectedNode.parentNode; decorateNodes( g_coloredNodes.concat( [ [g_selectedNode, "lightskyblue" ] ].reverse() ).reverse() ); }

}( )); </script>