力导向图 force 节点按顺序排布

[henryfordstick]

问题描述

原问题：源数据节点类型分为两种，如 x, y 。要求 x 类型节点分布在 根节点 左边，y 类型节点分布在根节点右边。 解决思路：力导向图渲染出来节点是乱序的，有什么方法能让节点按照数据给定的顺序排布呢？

重现链接

https://codesandbox.io/s/optimistic-haibt-jrz7n8?file=/src/index.js

重现步骤

1、默认给出 nodes 和 edges 是按照 0-6的顺序， 0 是根节点 2、nodes 分为 x，y 两种类型的数据

预期行为

1、期望看到 1-6 的节点是按照顺序排布的 2、或者 x 类型数据分布在 根节点左边，y 类型数据分布在根节点右边

平台

• 操作系统: [macOS, Windows]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[Yanyan-Wang]

尝试 force 的聚类：https://g6.antv.vision/zh/examples/net/forceDirected#forceClustering

或者在初始化的时候，初始化 X 类节点数据中的 x y 值比较接近，特别是 x 例如 10 + Math.random()，Y 类型的节点数据中 x y 节点，比如 x 是 300 + Math.random()