I am currently utilizing pydotplus for generating graphs and storing them in SVG using graphviz:
For example, here's how I add a node (without specifying a node ID attribute):
g.add_node(pydotplus.Node(fn_name,
style="filled",
fillcolor='cornflowerblue',
shape='Mrecord',
fontname="Consolas",
fontsize=8.0))
The resulting SVG file can be found here:
https://github.com/tarun27sh/gdb_graphs/edit/master/gallery/test.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
-->
<!-- Title: Created by: Tarun Sharma (<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fb8f9a898e95c9cc8893bb9c969a9297d5989496">[email protected]</a>) Pages: 1 -->
...
...// Truncated for brevity
...
The generated SVG nodes are created with id=nodex, where x is an incrementing number:
<g id="node1" class="node"><title>main</title>
Is there a way to relate the id of a graph node to its title? JavaScript does not allow me to read the title of an SVG node directly.
To incorporate Javascript, I'm including <script> tags within the <svg> tags:
<svg> .....
<script type="text/javascript">
window.addEventListener('load',function(){
alert('Hi')
})
function nodeClick() {
alert('You have clicked a node');
var node1 = document.getElementById('node1');
alert(node1.id);
alert(node1.title); <= error
}
</script>
Edit:
Based on the suggested answer, I can now pass an id attribute while creating a node or edge, and utilize them in JavaScript (pydotplus allows all attributes that graphviz supports):
g.add_node(pydotplus.Node(elem,
id=elem,
style="filled",
fillcolor='cornflowerblue',
shape='box',
fontname="Consolas",
fontsize=12.0))
g.add_edge(pydotplus.Edge(edge_tuple,id="{}__{}".format(
edge_tuple[0],
edge_tuple[1])))