图 - 定位节点的算法
Graph - Algorithm to position nodes
我正在尝试创建一个动态图,用户可以在其中使用 ELK.js
添加新节点
该图是一棵具有一个根节点的树。我正在尝试使用 (x,y) 位置 (y 现在不重要)来设置连续节点的位置。
假设:
- 较低的 x 值将节点移至左侧。
- 一行中的两个节点不能具有相同的 x 值。
- 当我们添加一个新节点时,如果可用,它应该出现在其他子节点的右侧(例如,第 2 行和第 3 行中的绿色框是新节点)
- 可以随时向每一行添加新节点(第 2 行和第 3 行中的绿色框)
- 我们可以用来设置 x 值的最大数字是 16 位长:9999999999999999
可以找到位置行为的简单示例here(查看节点 n2、n3、n4 的位置并在 JSON 中更改它们)
我试图不计算一行中每个节点的每个位置。我尝试了很多不同的数字,但我坚持了下来,需要新的想法。
如有任何帮助,我们将不胜感激。谢谢
您可以按如下方式处理:
当一个新节点是其级别上的第一个节点时,将其设为 0 作为其 x-value。
当它不是第一个时,找出它的直接两个兄弟在那个级别上(一个在节点的左边,一个在节点的右边)。在某些情况下,您需要通过一个或多个祖先节点从节点遍历以找到此类直系兄弟节点。
获取这两个兄弟节点的x-value,取这两个值的平均值作为新节点的x值。
可能是一侧只有一个兄弟姐妹。如果右边没有兄弟姐妹,取左边兄弟姐妹的x-value和1016之间的平均值。如果是左兄弟姐妹缺失,取右兄弟姐妹的x-value和-1016.
之间的平均值
这实际上意味着您使用 -1016...1016 的初始范围,并在新节点必须放在一个段内。
我正在尝试创建一个动态图,用户可以在其中使用 ELK.js
添加新节点该图是一棵具有一个根节点的树。我正在尝试使用 (x,y) 位置 (y 现在不重要)来设置连续节点的位置。
假设:
- 较低的 x 值将节点移至左侧。
- 一行中的两个节点不能具有相同的 x 值。
- 当我们添加一个新节点时,如果可用,它应该出现在其他子节点的右侧(例如,第 2 行和第 3 行中的绿色框是新节点)
- 可以随时向每一行添加新节点(第 2 行和第 3 行中的绿色框)
- 我们可以用来设置 x 值的最大数字是 16 位长:9999999999999999
可以找到位置行为的简单示例here(查看节点 n2、n3、n4 的位置并在 JSON 中更改它们)
我试图不计算一行中每个节点的每个位置。我尝试了很多不同的数字,但我坚持了下来,需要新的想法。
如有任何帮助,我们将不胜感激。谢谢
您可以按如下方式处理:
当一个新节点是其级别上的第一个节点时,将其设为 0 作为其 x-value。
当它不是第一个时,找出它的直接两个兄弟在那个级别上(一个在节点的左边,一个在节点的右边)。在某些情况下,您需要通过一个或多个祖先节点从节点遍历以找到此类直系兄弟节点。
获取这两个兄弟节点的x-value,取这两个值的平均值作为新节点的x值。
可能是一侧只有一个兄弟姐妹。如果右边没有兄弟姐妹,取左边兄弟姐妹的x-value和1016之间的平均值。如果是左兄弟姐妹缺失,取右兄弟姐妹的x-value和-1016.
之间的平均值这实际上意味着您使用 -1016...1016 的初始范围,并在新节点必须放在一个段内。