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

2024-02-18 04:31:35

在数据可视化领域，3D 力导向图以其强大的交互性和直观的展示效果，成为了展现复杂关系网络的利器。然而，当网络节点和关系数量庞大时，如何快速定位和突出显示我们感兴趣的部分就成了一个关键问题。本文将聚焦于 3D 力导向图中节点和关系的高亮显示，探讨如何通过简单的交互操作，让用户可以清晰地识别节点间的关联关系。

我们都知道，3D 力导向图本质上是由节点和连接节点的关系所构成的。当用户将鼠标悬停在某个节点上时，我们希望能够清晰地看到：这个节点与哪些其他节点存在直接联系？这些联系又是如何构成的？为了达到这个目的，我们需要借助一些 JavaScript 库和事件监听机制来实现节点和关系的高亮效果。

这里，我们选择使用 3d-force-graph 这个库来构建 3D 力导向图。它提供了丰富的 API 和事件回调函数，方便我们进行自定义开发。首先，我们需要导入 d3 和 3d-force-graph 这两个库：

import * as d3 from 'd3';
import { ForceGraph3D } from '3d-force-graph';

接下来，我们创建一个 3D 力导向图实例，并传入图数据：

const graph = new ForceGraph3D()
  .container(document.getElementById('3d-graph'))
  .graphData({
    nodes: [
      { id: 'node1', name: 'Node 1' },
      { id: 'node2', name: 'Node 2' },
      { id: 'node3', name: 'Node 3' },
    ],
    links: [
      { source: 'node1', target: 'node2' },
      { source: 'node2', target: 'node3' },
    ],
  });

这段代码创建了一个包含三个节点和两条关系的简单图。接下来，我们需要利用 onNodeHover() 方法来监听节点的悬停事件：

graph.onNodeHover(node => {
  // 当鼠标悬停在节点上时，高亮显示该节点。
  node.color = 'red';

  // 找到与该节点相关的所有关系，并将其高亮显示。
  const relatedLinks = graph.graphData().links.filter(link => link.source === node || link.target === node);
  relatedLinks.forEach(link => {
    link.color = 'red';
  });

  // 刷新图表以应用更改。
  graph.refresh();
});

在这段代码中，当鼠标悬停到某个节点上时，我们会将该节点的颜色设置为红色，表示高亮状态。同时，我们还会遍历图数据中的所有关系，找到与当前节点相关的那些关系，并将它们的颜色也设置为红色。最后，我们调用 graph.refresh() 方法来刷新图表，使更改生效。

为了让高亮效果更加完整，我们还需要监听节点的离开事件，以便在鼠标离开节点时取消高亮状态：

graph.onNodeOut(node => {
  // 当鼠标离开节点时，取消高亮显示该节点。
  node.color = 'black';

  // 找到与该节点相关的所有关系，并取消其高亮显示。
  const relatedLinks = graph.graphData().links.filter(link => link.source === node || link.target === node);
  relatedLinks.forEach(link => {
    link.color = 'black';
  });

  // 刷新图表以应用更改。
  graph.refresh();
});