Skip to main content
 首页 » 编程设计

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

2024年10月01日23del

有没有一种标准的方法来读取和解析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>