问题标签 [dagre]

鉴于下面的 cytoscape.js 片段，使用 dagre 布局，任何人都可以解释为什么节点 2 将自己定位在右下角，而不是像其他节点那样按顺序排列？

我在使用 Javascript 生成漂亮的家谱时遇到问题。

要求：

• 每个孩子都应该连接到树中的两个父母，而不是像某些图表中的一个
• 我希望配偶在树上彼此相邻（垂直位置相同）
• 我想把节点按世代垂直排列，让你一眼就能看到同一个年代出生的人。
• 随着时间的推移，一个人可以有多个配偶，并且每个人都有孩子
• 父母和孩子可以在树中自由添加，而不只是“从一个人向上追溯”

我尝试过的最接近这一点：

1. Cytoscape JS以Dagre作为布局引擎，并启用了曲线样式：出租车边缘。

   （随机数据图表。实线为亲子关系，虚线为配偶）

   问题是配偶彼此不一致。Dagre 历来支持“等级”作为节点的参数，这意味着您可以强制某些节点处于特定高度（如果您愿意，可以将其视为“一代”）。不幸的是，它不再起作用了，负责的开发者也不再为这个项目工作了。这将很好地解决我的问题。

我尝试过但失败的其他事情：

1. 将 dagre 降级到支持等级的旧版本？

   还没有与任何版本的 dagre 合作。

2. D3与dagre-d3

   和上面的问题一样，因为 dagre-d3 是 dagre 的修改版本，这意味着它不支持分代排序。

3. yFiles 家谱演示看起来很棒，但是是商业的。对于我的目的（希望任何人建立自己的家谱），单个开发人员许可证的成本是 26.000 美元（！？！）。显然不能接受。

   

我的问题

是否可以像我上面描述的那样垂直对齐我的 cytoscape/dagre 图中的节点？

如果没有，我愿意尝试其他库和其他布局算法。

我正在寻找一个看起来类似于 yFiles 解决方案但使用开源工具的工作示例。

我正在使用带有 dagre 布局的 Cytoscape.js 来可视化树状层次结构。我有几个关于布局的问题。您可以在此处检查实际和预期快照并检查可运行的示例。

1. 每个等级/层次结构级别/中的节点中心对齐。可以根据宽度最大的节点左对齐吗？
2. 同一等级的相邻节点之间的间隔对于节点来说是相同的，无论它们是否在复合节点中。我们可以为复合节点中的节点指定更小的间隔吗？我在复合节点中指定了页眉和页脚 svg，并且可以有来自同一等级的多个节点。如果我为所有节点设置较小的间隔，那么复合节点将重叠。我想避免复合节点重叠，同时在复合节点中有更小的间隔。
3. 我们可以为同级别的父节点指定顺序吗？例如，我希望 node5 和 node7 以及它们的复合节点位于顶部？我不确定 dagre 布局是否支持这一点。至于 klay 和 elk 布局，它们的布局似乎没有 dagre 好。

我很好奇上述是否可以通过特定布局实现或必须手动处理。

您可以在上面找到一个可运行示例的链接。

我正在使用 dagre-d3 库来创建流路。我需要为每个标签都有自定义组件，但它不呈现反应组件，但是如果标签是简单的 html，它确实可以正确呈现。我需要做什么？以下是我要实现的示例，第一个节点应该是组件，但它呈现一个简单的空框代替它：

代码沙盒 URL

我想从一堆节点中绘制图表。到目前为止， Dagre ( https://github.com/dagrejs/dagre ) 很好，只要我不必绘制输入/输出。我想渲染这样的东西：

所以我想使用 cytoscape ( https://js.cytoscape.org/) 带有节点的自定义图纸。更重要的是，我已经与用于绘制节点的画布进行了几次鼠标交互。这就是为什么我尝试在无头模式下使用 cytoscape（目前具有 dagre 布局扩展），最后抓取节点坐标，然后自己渲染图形。问题是：我无法为每个节点设置特定的大小（尽管我在节点样式选项中设置了宽度和高度，甚至尝试使用某些值设置节点选择器样式），并且 cytoscape 似乎无法从头开始生成正确的布局（不定义初始边界）。例如，dagree 自己渲染所有节点位置，并能够计算包含所有节点的布局大小。如果在 cytoscape 选项中没有设置边界，则所有节点基本上都在同一位置，

知道如何实现吗？

我希望我是可以理解的;-)

谢谢你的帮助！

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

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

这是 dagre-d3 版本：

这是实际的细胞景观：

如您所见，除了：

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

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

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

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

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

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

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

任何帮助，将不胜感激！

code_snipped

我在材料选项卡上有一个细胞景观图。我有一个使图表变大的按钮。当图表较大时，我想添加一个滚动条。

这是堆栈闪电战：https ://stackblitz.com/edit/angular-68qptm?file=src%2Fapp%2Fshow-customers%2Fshow-customers.component.html

单击图形并单击大，您将图形变大，但我在 x 轴上看不到任何滚动条。

随着内容变大，我正在尝试添加滚动条。

我正在使用 Cytoscape Dagre 扩展从左到右显示层次图。它有 14 个孩子和一个父母 1 和主要父母。所有孩子都连接到父母 1，但每当我使用 dagre 扩展绘制图形时，似乎孩子之间是相互连接的。他们之间没有任何优势，但达格雷仍然表明了这一点。带有 Dagre 的 Cytoscape 是否能够显示具有多个子级的层次图？

这是 stackblitz 示例：https ://stackblitz.com/edit/dagre-childrenconnected

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