复合节点布局问题 - cytoscape js
Compound nodes layout issues - cytoscape js
更新：添加了我要添加的图像的拼贴画以绕过声誉限制
我一直在研究一个 cytoscape 实现，它将动态显示我从数据库中提取的信息到网页上。目标是成为一个组织结构图，在有向树结构中分组显示节点。我一直在做大量研究，并尝试了几种不同的布局和 api 选项来尝试满足用例，但我在让它按照我想要的方式工作时遇到了问题。
具体来说，我想使用复合节点 - parents 是人民的队伍。我了解到很多布局在设计时根本没有考虑复合节点，我一直在尝试不同的实现，包括创建初始布局然后尝试 运行 辅助布局的实现特别是 parents.
的后代
以下是我尝试过的最接近的方法及其问题：
图表图像：https://i.stack.imgur.com/6hzVS.png
cose-bilkent:
这个的主要问题是它似乎并不适用于有向树，而是自行决定放置。我遇到的更大问题是我无法找到一种方法来更好地分散节点在他们的组内。我尝试使用包含的节点填充选项，但它们没有产生影响，我假设这是由于复合性质。
网格：
图形在所有节点的完美网格布局中，但忽略了 parent 个节点。
这个布局最初对我有用，并且可以轻松更改每栏的人数。当我更改元素时，虽然我意识到它最初起作用是巧合 - 似乎它完全忽略了 parent 节点，如果在设计时没有考虑到它们，这是可以理解的。
网格-后代：
图表是两组后代相互叠加。
我接下来尝试的是使用不同的布局来确定 parent 的初始位置，然后对后代执行网格布局以使它们按组组织。然后我意识到 parent 只是对其 child 的位置做出反应。此外，似乎为网格分别调用节点集上的布局完全忽略了图形上存在的任何其他内容，导致组彼此重叠。
可乐:
很接近，但是将它们放在图表上的方式结构不合理，导致组中的位置混乱，尽管它们之间的间距足够大。
如果我能弄清楚如何 运行 在 parent 节点上进行适当的布局，强制树结构在没有复合节点的情况下工作，这似乎会很有效。
这或多或少是我想看到的，尽管每列节点数的逻辑并不那么重要。只要整理得井井有条：
https://i.stack.imgur.com/irVaK.png
有人可以就我如何着手完成这项工作提供任何建议吗？我还没有找到任何可以正常工作的布局设置，而且我真的不知道从这里该做什么。我也希望避免从头开始创建全新的布局。非常感谢任何帮助。
如果您有合适的树数据结构，则不应使用复合节点进行布局。当 children 上有额外的限制时，通常不可能满足复合 parent 位置限制。这是因为 parent 自然受到其 children 的约束——parent 没有自己的位置或大小，it's children define it implicitly.
复合图的最佳布局是 force-directed（物理模拟），例如 CoSE 或 Cola。
在你的例子中，你只有一棵树。我会使用没有任何化合物的 breadthfirst 或 Dagre 布局。每一级自然会标明等级
对于任何感兴趣的人，我为解决此问题所做的工作是创建我自己的预设布局函数，该函数指示 (children) 个节点在图表上的位置，使用它们的属性来指示它们的位置。
它被设计为仅显示线性复合图，并按层次结构中 "level" 的顺序排列。它能够在 parent 节点内显示 grid-like 集合中的 children 节点（视觉上 - 记住 parent 只是根据它们的 children 进行调整），在上述线性水平的顺序。
您还可以指定集合中的列数、节点之间 space 和级别之间 space 的值。如果您想在节点之间指定 "x-space" 和 "y-space" 之类的东西，显然有很多空间可以使变量更详细。
假设如下：
-你提前知道每个复合组对应什么级别
-你提前知道每个复合组有多少个节点
-如果你动态地做这个，你有办法动态生成字典所需的 javascript 变量，它跟踪每个组的总大小以及每个组有多少个节点已入帐。
这是代码。我知道这是一个小众案例，但如果您确实有理由使用它，请记住它肯定容易出错，而且效率绝对低下（Javascript 不是我的强项...）。我已经测试了我认为在我的项目中很常见的某些边缘情况，但可能还有其他未考虑的情况。
（另外 upvotes/comments 也不会造成伤害。我很好奇这是否真的可以帮助某人...）
更新：添加了我要添加的图像的拼贴画以绕过声誉限制
我一直在研究一个 cytoscape 实现，它将动态显示我从数据库中提取的信息到网页上。目标是成为一个组织结构图，在有向树结构中分组显示节点。我一直在做大量研究，并尝试了几种不同的布局和 api 选项来尝试满足用例，但我在让它按照我想要的方式工作时遇到了问题。
具体来说，我想使用复合节点 - parents 是人民的队伍。我了解到很多布局在设计时根本没有考虑复合节点，我一直在尝试不同的实现，包括创建初始布局然后尝试 运行 辅助布局的实现特别是 parents.
的后代以下是我尝试过的最接近的方法及其问题：
图表图像：https://i.stack.imgur.com/6hzVS.png
cose-bilkent:
这个的主要问题是它似乎并不适用于有向树，而是自行决定放置。我遇到的更大问题是我无法找到一种方法来更好地分散节点在他们的组内。我尝试使用包含的节点填充选项，但它们没有产生影响，我假设这是由于复合性质。
网格：
图形在所有节点的完美网格布局中，但忽略了 parent 个节点。
这个布局最初对我有用，并且可以轻松更改每栏的人数。当我更改元素时，虽然我意识到它最初起作用是巧合 - 似乎它完全忽略了 parent 节点，如果在设计时没有考虑到它们，这是可以理解的。
网格-后代：
图表是两组后代相互叠加。
我接下来尝试的是使用不同的布局来确定 parent 的初始位置，然后对后代执行网格布局以使它们按组组织。然后我意识到 parent 只是对其 child 的位置做出反应。此外，似乎为网格分别调用节点集上的布局完全忽略了图形上存在的任何其他内容，导致组彼此重叠。
可乐:
很接近，但是将它们放在图表上的方式结构不合理，导致组中的位置混乱，尽管它们之间的间距足够大。
如果我能弄清楚如何 运行 在 parent 节点上进行适当的布局，强制树结构在没有复合节点的情况下工作，这似乎会很有效。
这或多或少是我想看到的，尽管每列节点数的逻辑并不那么重要。只要整理得井井有条：
https://i.stack.imgur.com/irVaK.png
有人可以就我如何着手完成这项工作提供任何建议吗？我还没有找到任何可以正常工作的布局设置，而且我真的不知道从这里该做什么。我也希望避免从头开始创建全新的布局。非常感谢任何帮助。
如果您有合适的树数据结构，则不应使用复合节点进行布局。当 children 上有额外的限制时，通常不可能满足复合 parent 位置限制。这是因为 parent 自然受到其 children 的约束——parent 没有自己的位置或大小，it's children define it implicitly.
复合图的最佳布局是 force-directed（物理模拟），例如 CoSE 或 Cola。
在你的例子中，你只有一棵树。我会使用没有任何化合物的 breadthfirst 或 Dagre 布局。每一级自然会标明等级
对于任何感兴趣的人，我为解决此问题所做的工作是创建我自己的预设布局函数，该函数指示 (children) 个节点在图表上的位置，使用它们的属性来指示它们的位置。
它被设计为仅显示线性复合图，并按层次结构中 "level" 的顺序排列。它能够在 parent 节点内显示 grid-like 集合中的 children 节点（视觉上 - 记住 parent 只是根据它们的 children 进行调整），在上述线性水平的顺序。
您还可以指定集合中的列数、节点之间 space 和级别之间 space 的值。如果您想在节点之间指定 "x-space" 和 "y-space" 之类的东西，显然有很多空间可以使变量更详细。
假设如下：
-你提前知道每个复合组对应什么级别
-你提前知道每个复合组有多少个节点
-如果你动态地做这个，你有办法动态生成字典所需的 javascript 变量，它跟踪每个组的总大小以及每个组有多少个节点已入帐。
这是代码。我知道这是一个小众案例，但如果您确实有理由使用它，请记住它肯定容易出错，而且效率绝对低下（Javascript 不是我的强项...）。我已经测试了我认为在我的项目中很常见的某些边缘情况，但可能还有其他未考虑的情况。
（另外 upvotes/comments 也不会造成伤害。我很好奇这是否真的可以帮助某人...）