问题标签 [dagre-d3]

我将我的项目从 dagre-d3 转移到 cytoscape。

Cytoscape.js 确实更灵活，将允许更强大的控制，但现在，我无法获得我想要的边缘渲染。

这是 dagre-d3 版本：

这是实际的细胞景观：

如您所见，除了：

• 集群的顺序不同（没什么大不了的）。
• 边缘可以重叠整个图。

最后一个是我的主要问题，我只是找不到一种方法来告诉 cytoscape 使边缘尽可能平行，就像 dagre-d3 一样。

我将尝试使用分段边缘（这似乎是正确的边缘类型），但我可以找到一种配置它的方法。也尝试出租车一，但标签不可读。

这是一个完整的例子：https ://jsfiddle.net/uqtahcfs/

有什么办法可以让段看起来像平行？

我用 dagre/d3 创建了一个有向的上下图。但在某些情况下，图表太宽而无法在屏幕上显示。我想在页面上添加一个水平滚动条，但我对前端开发有点陌生，我似乎无法找到如何做到这一点。

我添加了一个小代码片段。图形存储在 svg 对象中。

任何帮助，将不胜感激！

code_snipped

我正在尝试在组件中显示流程图，但它显示无法读取未定义的属性。如果我将componentDidMount方法的内容移动到 render 方法，它不会显示任何错误，也不会在屏幕上呈现（打印）任何内容。

我使用 dagreD3 创建了一个简单的流程图，请在此处查看示例

我有几组节点

哪个有这样的边缘

这里的问题是，有最后一条边graph.setEdge('main', 'e')，因为main是 e 的父节点，所以e节点位于主节点之下。

我所期待的是，当我尝试从中设置边缘时，main to e它应该保持相同的水平并从中画一条线main to e。我只是想将main保持在流程图的最后一级。是否有任何可能的方法将main保持在同一级别，并且所有剩余节点都应该在main之上？

在上面的链接中，请取消注释这一行graph.setEdge('main', 'e')，看看图表是如何变化的。

我正在尝试创建一个简单的图表，并且我想在特定位置添加节点。

setNode 正在创建一个节点，无论如何我可以指定位置吗？

我被困在这个问题上，需要帮助。我正在尝试在 HTML 页面中显示多个 DAG（基于 dagre-d3）。这些 DAG 的节点和边来自元组列表，其中元组的形式为 (DAG_name, [list_of_nodes], [list_of_edges])。这个元组被传递给我的 HTML，我遍历这个元组列表并将节点和边的列表发送到一个 javascript 函数，然后形成 dagre-d3 graphlib 图形对象。然后将该对象传递到 SVG 并最终渲染。问题是 HTML 总是呈现最后一个图形对象（基于最终节点和边列表）。我已经在控制台中打印了节点和边列表以及每次迭代的图形对象，并且它们打印正确。问题似乎与渲染有关。我已经尝试过 Chrome 和 Safari，两者都有相同的结果。

我正在尝试显示一些节点，它们下面有一些文本。但是，我无法根据节点正确放置链接。我不确定如何确定链接的起点并对其进行操作，以便我的链接从正确的位置开始。请参考以下链接： https ://stackblitz.com/edit/angular-ivy-zg2hgf

我对 D3 很陌生，并尝试使用 Dagre-D3 将多个图表放在同一页面上。

我已经成功地让它们渲染，但存在一些问题：

1. 我的图表大小不同，有些对于 svg 来说太大了，而有些则太小了。关于设置 svg 大小以适合每个人的任何建议？
2. 我希望能够缩放/平移它们中的每一个，但这仅适用于最后一个图形即使我添加更多图形，它总是只有最后一个缩放。

这是一个带有 4 个图表的代码示例。他们都渲染，但不是很好：https : //codepen.io/djangomachine/pen/wvPMZQK/https: //jsfiddle.net/3xguovqj/

（以及该示例中的单个图表）

在此示例中，您将看到我更改了每个图形的变量名称，因为当每个图形具有相同的变量名称时事情无法正常工作。希望这是一个明智的选择，但如果我做错了，请随时纠正我。

对此的任何帮助将不胜感激。

我觉得我已经查看了堆栈溢出中的所有 git 存储库和帖子，并且干了起来……我正在寻找一种以图形方式显示联谊会家谱的方法。是什么让这个问题变得独特，并且让我感到不安的是 dagre 不再有 rank 工作，因为我需要以下节点条件：

• 一个节点可以有多个父节点（大节点）
• 一个节点可以有多个孩子（小）
• 一个节点被分配一个等级（类）来表示它们何时交叉
• 一个节点可以有来自不同类的连接（从不同类中获取两个小节点）

我一直在从我们的数据库中做一些工作表来自动化这个过程，但我想要一些可以缩放和滚动的东西，如果你点击树的节点，我还可以添加更多细节。

有多个 JavaScript 库（例如Dagre.js、Cola.js）用于计算DAG（有向无环图）布局；即，计算节点和链接的坐标以最小化链接的总长度和交叉链接的数量。

在我们的 Web 应用程序中，我们使用Dagre.js来计算 DAG 的布局，具有以下规范：

• 可能有一个或多个根。
• DAG(s) 从左到右生长，所以根应该总是在左边。
• DAG 很大（大约 1,000 个节点）。
• 所有节点的宽度相同，但高度不同。
• 节点是集群的。

我编写了这个 CodeSandbox来生成随机 DAG 并展示Dagre.js有多慢。笔记：

• 默认情况下，它会生成一个包含 100 个节点的随机 DAG。您可以通过修改第 17 行 ( let nodes = 100;) 来更改音符的数量。
• 在第 56 行计算完布局后，您会看到将单个节点添加到图中所花费的时间与第一次计算布局所花费的时间几乎相同。这使得在浏览器中与大型 DAG 进行交互几乎是不可能的。

问题：我们如何更有效地计算 DAG(s) 布局？