在3d力导向图中，如何使相互关联的节点、关系高亮

前言

3d-force-graph 是一个基于力导向图的 JavaScript 库，用于在 3D 空间中可视化关系网络。其中一个重要的功能是高亮关联节点和关系，让用户更容易地理解网络结构和属性。

相关方法

在 3d-force-graph 中，我们可以使用 highlightNode 和 highlightLink 方法来实现节点和关系的高亮效果。

代码示例

下面是一些示例代码，演示如何使用这些方法：

    // data数据格式
    //{
    //    nodes: [
    //        {source: 1, target: 0},
    //        {source: 2, target: 1}
    //    ],
    //    links: [
   //        {id: 0},
   //        {id: 1},
   //        {id: 2},
   //     ]
   // }
const myGraph = ForceGraph3D()
  .graphData(data)
  .onNodeHover(node => {
    // 高亮相关节点
    const relatedNodes = [node.id, ...node.neighbors];
    myGraph
      .graphData().nodes.forEach(n => n.__threeObj.material.emissive.setHex(
        relatedNodes.indexOf(n.id) !== -1 ? 0xaaaaaa : 0x000000
      ));
    
    // 高亮相关关系
    myGraph
      .graphData().links.forEach(link => {
        link.__lineObj.material.opacity = (relatedNodes.indexOf(link.source.id) !== -1 && relatedNodes.indexOf(link.target.id) !== -1) ? 1 : 0.2;
      });
  })

在这个示例中，我们注册了 onNodeHover 回调函数，在鼠标悬停在节点上时触发。在回调函数中，我们首先获取与当前节点直接相邻的节点 ID（即 neighbors 属性），然后遍历所有节点和关系，并设置它们的材质或透明度，以达到高亮效果。

具体来说，对于节点，我们使用 emissive 材质把相关节点变成灰色；对于关系，我们设置其透明度，以使与相关节点不相邻的关系变得模糊。

除了高亮相关节点和关系之外，我们还可以根据其他属性来自定义高亮效果，例如节点和关系的颜色、大小等等。这些选项可以通过调用不同的方法来实现。

总结

总之，通过使用 highlightNode 和 highlightLink 方法，我们可以很容易地实现节点和关系的高亮效果，提升关系网络可视化的效果和用户体验。