有没有一种标准的方法来读取和解析JavaScript中的DOT图形文件,理想情况下在d3中可以很好地工作？
目前,我唯一能想到的就是阅读纯文本并进行自己的解析.希望这会重新发明轮子.
d3.text("graph.dot", function(error, dotGraph) {
....
)};
Ric*_*ish 40
要获取在Javascript中呈现的Graphviz DOT文件,请合并graphlib-dot和dagre-d3库.
该graphlibDot.parse()方法在DOT语法中采用图形或有向图定义并生成图形对象.dagreD3.Renderer.run()然后,该方法可以将该图形对象输出到SVG.
然后,您可以使用其他D3方法向图形添加功能,根据需要从graphlib图形对象中检索其他节点和边缘属性.
一个简单的自包含示例是:
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>参加聚会晚了，但是如果您仍然感兴趣，可以通过以下方法使用我刚刚发布的新d3-graphviz插件：
<!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.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>