d3.js DAG图的自动布局

hmae6n7t 于 2023-10-19 发布在其他

关注(0)|答案(1)|浏览(116)

我需要一个算法来布局拓扑排序的DAG，类似于我的JSFiddle所示。
有没有什么开源库可以做到这一点？我有哪些选择？

目前，它只是一个简单的手动计算X和Y坐标：

var nodes = [
    {label: 'A', x:     constant, y: 255, width:70, height:50 }, 
    {label: 'B', x: 2.5*constant, y: 410, width:70, height:50 },
    {label: 'C', x: 2.5*constant, y: 255, width:70, height:50 },
    {label: 'D', x: 4.0*constant, y: 255, width:70, height:50 },
    {label: 'E', x: 2.5*constant, y: 100, width:70, height:50 },
    {label: 'F', x: 4.0*constant, y: 100, width:70, height:50 }
];

d3.js

来源：https://stackoverflow.com/questions/75324224/automatic-layout-of-dag-diagram

1条答案

按热度按时间

xoshrz7s1#

你可以用d3-graphviz来做这类事情。有很多样式和几个不同的布局引擎的选项。这和你的很接近：

let dotSource = `graph{
  rankdir = LR;
  node [
    style=filled;
    fillcolor=steelblue;
    fontcolor=white;
    shape=box
  ]
  A -- B;
  A -- C;
  A -- E;
  C -- D;
  C -- E;
  E -- F;
}`
d3.select("#graph").graphviz()
    .renderDot(dotSource);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-graphviz/5.0.2/d3-graphviz.min.js"></script>
<div id="graph" style="text-align: center;"></div>

赞(0）回复(0）举报 2023-10-19

我来回答

d3.js DAG图的自动布局

1条答案

相关问题

热门标签

最新问答