在javascript / d3中读取DOT文件 [英] Reading DOT files in javascript/d3
问题描述
有一个标准的方法来读取和解析DOT图形文件在JavaScript中，理想情况下，它将在d3中工作得很好。
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) {
....
)};
推荐答案
要使用JavaScript呈现Graphviz DOT文件， graphlib-dot 和 dagre-d3 libraries。
To get Graphviz DOT files rendered in Javascript, combine the graphlib-dot and dagre-d3 libraries.
graphlibDot.parse（）方法在DOT语法中接受图或图定义并生成图形对象。 dagreD3.Renderer.run（）方法然后可以将此图形对象输出到SVG。
The graphlibDot.parse() method takes a graph or digraph definition in DOT syntax and produces a graph object. The dagreD3.Renderer.run() method can then output this graph object to SVG.
额外的D3方法向图中添加功能，根据需要从graphlib图形对象检索额外的节点和边缘属性。
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.parse(
'digraph {\n' +
' a -> b;\n' +
' }'
)
// Render the graphlib object using d3.
var renderer = new dagreD3.Renderer();
renderer.run(g, d3.select("svg 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/v0.4.10/graphlib-dot.min.js"></script>
<script src="http://cpettitt.github.io/project/dagre-d3/v0.1.5/dagre-d3.min.js"></script>
<html>
<body>
<script type='text/javascript'>
</script>
<svg id="graphContainer">
<g/>
</svg>
</body>
</html>
这篇关于在javascript / d3中读取DOT文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
