DAG图自动布局答案

【问题标题】：Automatic layout of DAG diagramDAG图自动布局
【发布时间】：2023-02-04 06:43:16
【问题描述】：

我需要一种算法来布局拓扑排序的 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 directed-acyclic-graphs

【解决方案1】：

你可以用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>

【讨论】：