javascript - 复合节点布局问题 - cytoscape js

Question

更新:添加了我要添加的图像拼贴画，以绕过声誉封锁

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

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

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

图表图像:/image/6hzVS.png

科斯比尔肯特:

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

网格:

图表采用完美的网格状布局，所有节点均如此，但忽略父节点。

这种布局最初对我有用，并且具有能够轻松更改每列人数的好处。当我更改元素时，尽管我意识到它最初起作用是一个巧合 - 似乎它完全忽略了父节点，如果它没有考虑到父节点，这是可以理解的。

网格 - 后代:

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

接下来我尝试的是使用不同的布局来确定 parent 的初始位置，然后对后代执行网格布局以使它们组织在自己的组中。然后我意识到 parent 只是对 child 的安置使用react。此外，似乎为网格单独调用节点集上的布局完全忽略了图形上存在的任何其他内容，导致组被放置在彼此之上。

可乐:

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

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

<小时/>

这或多或少是我想看到的，尽管每列节点数的逻辑并不那么重要。只要它们排列整齐:

/image/irVaK.png

有人可以就我如何开展这项工作提供任何建议吗？我还没有找到任何工作正常的布局设置，而且我真的不知道从这里该做什么。我还希望避免从头开始创建全新的布局。非常感谢任何帮助。

Answer 1

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

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

就你而言，你只有一棵树。我会使用宽度优先或 Dagre 布局，而不使用任何复合布局。每个级别自然会表明排名。