gpt4 book ai didi

d3.js - 在javascript/d3中读取DOT文件

转载 作者:行者123 更新时间:2023-12-03 09:06:28 33 4
gpt4 key购买 nike

有没有一种标准的方法来读取和解析javascript中的DOT图形文件,理想情况下会在d3中很好地工作?

目前,我唯一能想到的就是阅读纯文本并进行自己的解析。希望这会重新发明轮子。

d3.text("graph.dot", function(error, dotGraph) {
....
)};

最佳答案

要获取以Javascript呈现的Graphviz DOT文件,请组合graphlib-dotdagre-d3库。
graphlibDot.read()方法采用DOT语法中的图形或有向图定义,并生成图形对象。然后dagreD3.render()方法可以将此图形对象输出到SVG。

然后,您可以使用其他D3方法向图添加功能,并根据需要从graphlib图对象中检索其他节点和边属性。

一个简单的独立示例是:

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>

关于d3.js - 在javascript/d3中读取DOT文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22595493/

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com