Question
I have created a web service which generates dot and xdot layout files for a graph using GraphViz on a server. Is there a way to visualise either dot or xdot files with d3.js on the clients browser?
If not, are there other JavaScript libraries which can visualise dot or xdot layouts?
Solution
The GraphViz documentation says:
1 Basic Graph Drawing
dot draws directed graphs. It reads attributed graph text files and writes drawings, either as graph files or in a graphics format such as GIF, PNG, SVG, PDF, or PostScript.
If you can get your graph output as SVG, you can manipulate it with d3. This answer describes how to read an external SVG file as XML and insert it into your document.
OTHER TIPS
Soooooo late to the party, but now you can do this with d3-graphviz:
https://stackoverflow.com/questions/21762681
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//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.1.2/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>
<script>
d3.select("#graph").graphviz()
.renderDot('digraph {a -> b}');
</script>Also check out this demo
There were several solutions around, but none of them did what I really wanted: take some nice, working D3js graph visualisation code and feed it with .dot file instead of .json file.
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/d3-dot-graph@1.0.0/build/d3-dot-graph.min.js"></script>
<script>
d3.dot(url, function(graph) {
...
});
</script>
instead of:
d3.json(url, function(graph) {...});
