Reading DOT files in javascript/d3
The question asks for a possibility to visualise .dot
files einther in javascript
or D3js
. I think the solution from the highest rated answer will work for most of you.
I was unhappy because of these 3 reasons:
- It involves libraries like
lowdash
,dagre
andgraphlib
additionally toD3js
and is heavyweight. - Parser output is not a
D3js
"friedly" data-structure. - Usage (API) in not D3js style.
That's why I created an adapter which will basically allow you to use .dot
files with any of thousands of D3js
samples by changing just one statement. If you have some D3js
visualisation working on following data-structure:
{
"nodes": [ {"id": "Myriel"}, {"id": "Napoleon"}],
"links": [ {"source": "Myriel"}, {"target": "Napoleon"}]
}
Just include following script and call d3.dot
:
<script src="https://cdn.jsdelivr.net/gh/gmamaladze/[email protected]/build/d3-dot-graph.min.js"></script>
<script>
d3.dot(url, function(graph) {
...
});
</script>
instead of:
d3.json(url, function(graph) {...});
GitHub repository with code and examples
Late to the party, but if you're still interested, here's a way to do it with the new d3-graphviz plug-in that I just released:
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://viz-js.com/bower_components/viz.js/viz-lite.js"></script>
<script src="https://github.com/magjac/d3-graphviz/releases/download/v0.0.4/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.renderDot('digraph {a -> b}');
</script>
⚠ Solution proposed here depends on two libraries marked as unsupported by their authors.
To get Graphviz DOT files rendered in Javascript, combine the graphlib-dot and dagre-d3 libraries.
The graphlibDot.read()
method takes a graph or digraph definition in DOT syntax and produces a graph object. The dagreD3.render()
method can then output this graph object to SVG.
You can then use additional D3 methods to add functionality to the graph, retrieving additional node and edge attributes from the graphlib graph object as needed.
A trivial self-contained example is:
window.onload = function() {
// Parse the DOT syntax into a graphlib object.
var g = graphlibDot.read(
'digraph {\n' +
' a -> b;\n' +
' }'
)
// Render the graphlib object using d3.
var render = new dagreD3.render();
render(d3.select("svg g"), g);
// Optional - resize the SVG element based on the contents.
var svg = document.querySelector('#graphContainer');
var bbox = svg.getBBox();
svg.style.width = bbox.width + 40.0 + "px";
svg.style.height = bbox.height + 40.0 + "px";
}
svg {
overflow: hidden;
}
.node rect {
stroke: #333;
stroke-width: 1.5px;
fill: #fff;
}
.edgeLabel rect {
fill: #fff;
}
.edgePath {
stroke: #333;
stroke-width: 1.5px;
fill: none;
}
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://dagrejs.github.io/project/graphlib-dot/v0.6.4/graphlib-dot.min.js"></script>
<script src="https://dagrejs.github.io/project/dagre-d3/v0.5.0/dagre-d3.min.js"></script>
<html>
<body>
<script type='text/javascript'>
</script>
<svg id="graphContainer">
<g/>
</svg>
</body>
</html>
Same example, using latest version of graphlib-dot and dagre-d3.
window.onload = function() {
// Parse the DOT syntax into a graphlib object.
var g = graphlibDot.read(
'digraph {\n' +
' a -> b;\n' +
' }'
)
// Render the graphlib object using d3.
var renderer = dagreD3.render();
d3.select("svg g").call(renderer, g);
// Optional - resize the SVG element based on the contents.
var svg = document.querySelector('#graphContainer');
var bbox = svg.getBBox();
svg.style.width = bbox.width + 40.0 + "px";
svg.style.height = bbox.height + 40.0 + "px";
}
svg {
overflow: hidden;
}
.node rect {
stroke: #333;
stroke-width: 1.5px;
fill: #fff;
}
.edgeLabel rect {
fill: #fff;
}
.edgePath {
stroke: #333;
stroke-width: 1.5px;
fill: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://cpettitt.github.io/project/graphlib-dot/latest/graphlib-dot.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.js"></script>
<html>
<body>
<script type='text/javascript'>
</script>
<svg id="graphContainer">
<g/>
</svg>
</body>
</html>