3d-force-graph力导向图，如何让具有相同属性的子节点在一起

我正在参加「掘金·启航计划」

前言

3d-force-graph是一种基于力导向图的可视化工具，它可以帮助我们更直观地展示数据之间的关系。在使用3d-force-graph时，我们经常会遇到一种情况，即具有相同属性的子节点需要在一起展示，这时我们可以通过一些方法来实现这个目标。

方法一：使用颜色区分

我们可以通过为具有相同属性的子节点设置相同的颜色来让它们在一起展示。例如，我们可以将所有性别为男性的子节点设置为蓝色，将所有性别为女性的子节点设置为粉色。这样，在3d-force-graph中，所有性别为男性的子节点就会在一起展示，所有性别为女性的子节点也会在一起展示。

```javascript const data = { nodes: [ { id: 'node1', group: 'male' }, { id: 'node2', group: 'female' }, { id: 'node3', group: 'male' }, { id: 'node4', group: 'female' }, ], links: [ { source: 'node1', target: 'node2' }, { source: 'node2', target: 'node3' }, { source: 'node3', target: 'node4' }, ], };

const colorMap = { male: 0x0000ff, female: 0xff00ff, };

const Graph = ForceGraph3D() .graphData(data)