复合节点布局问题 - cytoscape js答案

【问题标题】：Compound nodes layout issues - cytoscape js复合节点布局问题 - cytoscape js
【发布时间】：2023-03-08 14:16:01
【问题描述】：

更新：添加了我要添加的图像拼贴以绕过声誉块

我一直致力于 cytoscape 实现，它将动态显示我从数据库中提取的信息到网页上。目标是成为一个组织结构图，在有向树结构中按组显示节点。我一直在做很多研究，并尝试了几种不同的布局和 api 选项来尝试满足用例，但我在让它按我的预期工作时遇到了问题。

具体来说，我想使用复合节点 - 父母是人们的行列。我了解到很多布局根本没有考虑到复合节点，我一直在尝试不同的实现，包括创建初始布局，然后尝试专门在后代上运行辅助布局的实现父母的。

以下是我尝试过的最接近的方法及其问题：

cos-bilkent：

这样做的主要问题是它似乎并不适用于有向树，而是自行决定放置。我遇到的更大问题是我无法找到一种方法将节点更好地分布在它们的组中。我尝试使用包含的节点填充选项，但它们没有产生影响，我假设这是由于复合性质。

网格：

图形在所有节点的完美网格布局中，但忽略了父节点。

这种布局最初对我有用，并且可以轻松更改每列的人数。当我改变元素时，虽然我意识到它最初工作是一个巧合 - 似乎它完全忽略了父节点，如果它没有在设计时考虑到它们是可以理解的。

网格 - 后代：

图表是两组相互叠加的后代。

接下来我尝试使用不同的布局来确定父代的初始位置，然后对后代进行网格布局，以使它们按组进行组织。那时我意识到父母只是对孩子的安置做出反应。此外，似乎为网格单独调用节点集上的布局完全忽略了图表上存在的任何其他内容，导致组被放在彼此之上。

可乐：

它很接近，但将它们放在图表上的方式结构不佳，导致组中的位置混乱，尽管它们间隔足够大。

如果我能弄清楚如何在父节点上运行正确的布局，这会很好用，强制树结构在没有复合节点的情况下工作。

这或多或少是我希望看到的，尽管每列节点数的逻辑并不那么重要。只要它们组织整齐：

有人可以就我如何进行这项工作提供任何建议吗？我找不到任何可以正常工作的布局设置，而且我真的不知道从这里做什么。我也更愿意避免从头开始创建一个全新的布局。非常感谢任何帮助。

【问题讨论】：

【解决方案1】：

如果您有适当的树数据结构，则不应使用复合节点进行布局。当对子级有附加约束时，通常不可能满足复合父级位置限制。这是因为父级自然会受到其子级的约束——父级没有自己的位置或大小，it's children define it implicitly。

复合图的最佳布局是力导向（物理模拟）布局，如 CoSE 或 Cola。

在你的情况下，你只有一棵树。我会使用没有任何化合物的广度优先或 Dagre 布局。每个级别自然会显示排名。

【讨论】：

所以我的另一个问题是我不想明确显示从一个人到另一个人的箭头 - 在一个可能暗示该人直接为指向它们的人工作的组织中。在这种情况下，边缘仅表示组织中的等级顺序。我曾尝试为每个孩子添加边缘并简单地使它们不可见，但为了使其结构整齐，它需要从一个等级到另一个等级的指数数量的边缘。我目前正在使用我自己的“预设”布局，我正在编写一个算法来手动将它们放置在图表上。
感谢您的回复。我一定会分享我想出的代码，以防在我完成时（而且我快到了）它可能会对其他人派上用场

【解决方案2】：

对于任何感兴趣的人，我为解决这个问题所做的就是创建我自己的预设布局函数，该函数指示（子）节点在图表上的位置，使用它们的属性来指示它们的位置。

它被设计为仅显示线性复合图，按层次结构中的“级别”顺序排列。它能够在其父节点内以网格状集合的形式显示子节点（视觉上 - 记住父母只需根据他们的孩子进行调整），按照提到的线性级别的顺序。

您还可以指定集合中的列数、节点之间的间距以及级别之间的间距。如果您想在节点之间指定“x-space”和“y-space”以及类似的东西，显然还有很多空间可以让变量更详细。

假设如下：

-你提前知道每个复合组对应什么级别

-您提前知道每个复合组中有多少个节点

-如果您动态地进行此操作，那么您有办法动态地生成字典所需的 javascript 变量，它会跟踪每个组的总大小以及每个组的节点数。

这是代码。我知道这是一个小众案例，但如果你确实有理由使用它，请记住它肯定容易出错，而且效率肯定很低（Javascript 不是我的强项......）。我已经测试了我认为在我的项目中很常见的某些边缘案例，但可能还有其他没有考虑在内。

（另外，upvotes/cmets 也不会受到伤害。我很好奇这是否真的可以帮助某人......）

【讨论】：