复合节点布局问题 - cytoscape js

时间:2016-11-24 01:57:23

标签: javascript cytoscape.js

更新:添加了我要添加的图片的拼贴画以获得声誉区块

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

具体来说,我想使用复合节点 - 父母是人民的行列。我已经了解到很多布局都没有考虑到复合节点的设计,我一直在尝试不同的实现,包括创建初始布局的实现,然后尝试专门针对后代运行辅助布局父母的。

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

图表图片:https://i.stack.imgur.com/6hzVS.png

COSE-比尔肯

这个问题的主要问题在于它似乎并不适用于有向树,而是决定自己的位置。我遇到的更大问题是我无法找到一种方法在组内更好地传播节点。我试图使用包含的节点填充选项,但它们没有影响,我假设是由于复合性质。

格:

图形处于所有节点的完美网格布局中,但忽略父节点。

此布局最初对我有用,并且可以轻松更改每列的人数。虽然我改变了元素,但我意识到它最初起作用是巧合 - 似乎它完全忽略了父节点,如果没有考虑它们,这是可以理解的。

网格 - 后代:

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

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

可乐:

它很接近,但它在图表上的方式结构不合理,导致组中的位置混乱,尽管它们间隔足够。

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

这或多或少是我想看到的,尽管每列节点数的逻辑并不重要。只要它们整齐有序地组织起来:

https://i.stack.imgur.com/irVaK.png

有人可以就如何制作这项工作给出任何建议吗?我无法找到任何工作正常的布局设置,我真的不知道该怎么做。我也希望避免从头开始创建一个全新的布局。非常感谢任何帮助。

2 个答案:

答案 0 :(得分:1)

对于任何有兴趣的人,我为解决这个问题所做的是创建我自己的预设布局函数,该函数指示图表中的(子)节点在哪里,使用它们的属性来指示它们的去向。

它设计为仅显示线性复合图,按顺序显示" level"在层次结构中。它能够在其父节点内以网格状集合显示子节点(在视觉上 - 记住父母只需根据他们的孩子进行调整),按照上述线性级别的顺序。

您还可以指定集合中的列数,节点之间的空间以及级别之间的空间的值。如果您想要指定" x-space"显然有很多空间可以使变量更加冗长。和" y-space"在节点之间,以及类似的东西。

它假设如下:

- 您提前知道每个化合物组对应的水平

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

- 如果你动态地制作它,你有办法动态生成字典所需的javascript变量,它跟踪每个组的总大小以及每组的节点数。

这是代码。我知道这是一个利基案例,但如果你确实有理由使用它,请记住它确实容易出错,并且效率低下(Javascript不是我的强项) ...)。我已经测试了一些我认为在我的项目中很常见的边缘情况,但可能还有其他一些不会被解释。

http://jsbin.com/quyipo/edit

(也赞成/评论也不会伤害。我很好奇,如果这实际上可以帮助某人......)

答案 1 :(得分:0)

如果您有合适的树数据结构,则不应使用复合节点进行布局。当孩子有额外的限制时,通常不可能满足复合父母位置限制。这是因为父母自然受其子女约束 - 父母没有自己的职位或身材,it's children define it implicitly

复合图的最佳布局是强制导向(物理模拟),如CoSE或Cola。

在你的情况下,你只有一棵树。我会使用没有任何化合物的breadthfirst或Dagre布局。每个级别自然会表示排名。