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

前言

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

方法一：使用颜色区分

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

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)
  .nodeColor(node => colorMap[node.group]);

在上面的代码中，我们定义了一个colorMap对象，它将性别为男性的节点映射为蓝色，将性别为女性的节点映射为粉色。然后，我们在创建3d-force-graph实例时，通过nodeColor函数将节点的颜色设置为对应的颜色。

方法二：使用力学模型

我们可以通过调整3d-force-graph的力学模型来让具有相同属性的子节点在一起展示。例如，我们可以增加同类节点之间的斥力，减小异类节点之间的斥力，这样就可以让同类节点更容易聚集在一起。

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 Graph = ForceGraph3D()
  .graphData(data)
  .d3Force('charge', (node) => {
    const strength = node.group === 'male' ? -100 : -50;
    return strength;
  })
  .d3Force('link', d3.forceLink().id(d => d.id).distance(50))
  .d3Force('center', d3.forceCenter())
  .d3Force('collision', d3.forceCollide().radius(10));

在上面的代码中，我们通过d3Force函数设置了四个力学模型：charge、link、center和collision。其中，charge模型用于设置节点之间的斥力，我们通过判断节点的group属性来设置不同的斥力大小；link模型用于设置节点之间的连线，我们将连线的距离设置为50；center模型用于将整个图形居中显示；collision模型用于防止节点重叠。

总结

通过上面的两种方法，我们可以让具有相同属性的子节点在3d-force-graph中聚集在一起。这样，我们就可以更直观地展示数据之间的关系，更容易发现数据中的规律和趋势。