Is there a standard way to read and parse DOT graph files in javascript, ideally in way that will work nicely in d3?
Currently, the only thing I can think of doing is reading plain text and doing my own parsing. Hopefully this'd be reinventing the wheel though.
d3.text("graph.dot", function(error, dotGraph) {
....
)};
⚠ 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>var g to read from a file? is it something lie: fs.readFileSync('graph.dot', 'UTF-8')? –
Steer 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.v7.js"></script>
<script src="https://unpkg.com/@hpcc-js/[email protected]/dist/graphviz.umd.js"></script>
<script src="https://unpkg.com/d3-graphviz@5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.renderDot('digraph {a -> b}');
</script>EDIT 2024-07-27: Updated the example to the latest d3-graphviz version and use https exclusively.
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>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:
lowdash, dagre and graphlib additionally to D3js and is heavyweight.D3js "friedly" data-structure.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) {...});
© 2022 - 2024 — McMap. All rights reserved.