3d力导向图设置节点间双向关系

前言

在3D力导向图中，我们有时需要展示节点之间的双向关系。默认情况下，3d-force-graph只能显示单向关系，即从一个节点指向另一个节点。但是，在某些场景下，我们需要同时展示节点之间的双向关系。比如，在社交网络分析或物流网络可视化中，这种需求非常常见。

在本篇博客中，我们将介绍如何在3D力导向图中设置双向关系样式。在此之前，您需要了解一些基本知识，例如HTML、CSS和JavaScript等。让我们开始吧！

创建3D力导向图

首先，让我们创建一个简单的3D力导向图，并设置一些节点和单向链接。这里，我们使用ForceGraph3D()函数来创建3D力导向图，并声明一些节点和链接数据：

const nodes = [
  { id: 'node1', name: 'Node 1' },
  { id: 'node2', name: 'Node 2' },
  { id: 'node3', name: 'Node 3' },
];

const links = [
  { source: 'node1', target: 'node2' },
  { source: 'node2', target: 'node3' },
];

const Graph = ForceGraph3D()
  .graphData({ nodes, links })
  .linkColor('#aaa')
  .linkOpacity(0.8)
  .linkWidth(2);

Graph(document.getElementById('my-3d-graph'));

这段代码将创建一个包含三个节点和两个链接的3D力导向图，并且链接的颜色、透明度和宽度都已设置。

设置双向关系样式

接下来，让我们修改代码以展示双向关系。对于每个链接，我们可以添加一个属性direction: 'both'来指示这是一个双向链接。例如：

const links = [
  { source: 'node1', target: 'node2', direction: 'both' },
  { source: 'node2', target: 'node3' },
];

现在，我们需要使用linkThreeObject()回调函数来为每个链接设置自定义的3D对象。具体而言，我们需要使用箭头来表示双向关系。以下是完整的代码：

const Graph = ForceGraph3D()
  .graphData({ nodes, links })
  .linkThreeObject((link) => {
    const isBidirectional = link.direction === 'both'; // 是否为双向链接
    const color = isBidirectional ? '#f00' : '#aaa';
    const opacity = isBidirectional ? 0.8 : 0.6;
    const width = isBidirectional ? 4 : 2;

    // 创建箭头
    const arrow = new THREE.Mesh(
      new THREE.CylinderGeometry(0, 0.1, 0.3, 5),
      new THREE.MeshBasicMaterial({ color })
    );
    arrow.rotation.z = Math.PI / 2;
    arrow.position.set(0, 0, -1);

    // 创建线条
    const geometry = new THREE.CylinderGeometry(width, width, link.distance || 1, 5, 1, true);
    const material = new THREE.MeshBasicMaterial({ color, transparent: true, opacity });
    const cylinder = new THREE.Mesh(geometry, material);

    // 创建组合
    const group = new THREE.Group();
    group.add(cylinder);
    if (isBidirectional) {
      group.add(arrow.clone());
      group.add(arrow.clone().rotation.z += Math.PI);
    }

    return group;
  });

Graph(document.getElementById('my-3d-graph'));

总结

在这段代码中，我们首先判断每个链接是否是双向的。如果是，则使用红色和较粗的线条表示；否则，使用灰色和较细的线条表示。

然后，我们创建一个箭头THREE.Mesh对象，并将其旋转90度。我们还创建了一个带有空心中心的圆柱体THREE.Mesh对象，代表链接线