D3.js 力导向图的显示优化（二）- 自定义功能

2024-03-04 16:27:05

摘要：在本文中，我们将借助 D3.js 的灵活性这一优势，去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能：Nebula Graph 图探索的删除节点和缩放功能。

文章首发于 Nebula Graph 官博：https://nebula-graph.com.cn/posts/d3-js-examples-for-advaned-uses/

前言

在上篇文章中（D3.js 力导向图的显示优化），我们说过 D3.js 在自定义图形上相较于其他开源可视化库的优势，以及如何对文档对象模型（DOM）进行灵活操作。既然 D3.js 辣么灵活，那是不是实现很多我们想做的事情呢？在本文中，我们将借助 D3.js 的灵活性这一优势，去新增一些 D3.js 本身并不支持但我们想要的一些常见的功能。

构建 D3.js 力导向图

在这里我们就不再细说 d3-force 粒子物理运动模块原理，感兴趣同学可以看看我们的上篇的简单描述, 本次实践我们侧重于可视化操作的功能实现。

好的，进入我们的实践时间，我们还是以 D3.js 力导向图对图数据库的数据关系进行分析为目的，增加一些我们想要功能。

首先，我们用 d3-force 力导向图来构建一个简单的关联网

this.force = d3
        .forceSimulation()
        // 为节点分配坐标
        .nodes(data.vertexes)
        // 连接线
        .force('link', linkForce)
        // 整个实例中心
        .force('center', d3.forceCenter(width / 2, height / 2))
        // 引力
        .force('charge', d3.forceManyBody().strength(-20))
        // 碰撞力 防止节点重叠
        .force('collide',d3.forceCollide().radius(60).iterations(2));

通过上述代码，我们可以得到下面这样一个可视化的节点和关系图。

这里我们简单介绍下上图，上图为图数据库 Nebula Graph 可视化工具 Studio 的图探索功能截图，在业务上，图探索支持用户任意选中某个点进行拓展，找寻、显示同它存在某种关系的点，例如上图点 100 和点 200 存在单向 follow 关系。

上图数据量并不大，如果我们在拓展时返回的数据量较大或多步拓展出来的数据逐步累加显示，则会导致当前视图页节点和边极多，页面需呈现的数据信息量大，且也不好找到想要的某个节点。好的，一个新场景上线了：用户只想分析图中的部分节点数据，不想看到全部的节点信息。删除任意选中这个新功能就可以很好地应对上面场景，删除不需要的节点信息，只留下想探索的部分节点数据。

支持删除任意选中功能

在实现这个功能之前，我先开始介绍下 D3.js 自带 API。没错，还是上篇提及的 D3.js 的 enter() 及没提到的 exit()

摘自文档的描述：

数据绑定的时候可能出现 DOM 元素与数据元素个数不匹配的问题， enter 和 exit 就是用来处理这个问题的。enter 操作用来添加新的 DOM 元素，exit 操作用来移除多余的 DOM 元素。
如果数据元素多于 DOM 个数时用 enter，如果数据元素少于 DOM元素，则用 exit。
在数据绑定时候存在三种情形：

数据元素个数多于 DOM 元素个数

数据元素与 DOM 元素个数一样

数据元素个数少于 DOM 元素个数

根据文档描述，想实现删除任意选中功能还是很简单的，乐观的笔者想当然地认为直接在数据层面进行操作就行。于是笔者直接在 nodes 数据里删除选中的节点数据 node，然后根据官方用法 d3.select(this.nodeRef).exit().remove() 移除多余的元素，好的，我们现在来看看这样做会带来了什么？

不想选中的节点是删除了，但其他节点的显示也乱了，节点颜色和属性同当前 DOM 节点对不上，为什么会这样呢？笔者又仔仔细细地看了一遍上面的文档描述，灵光一闪，来，先打印下 exit().remove() 的节点，看看到底它 remove 哪些节点？

果然是它，D3.js enter().exit() 的触发其实是在监听元素的个数的变化，也就是说，如果总个数缺少了两个，它确实会触发 exit() 方法，但是它处理的数据不是真正需删除的数据，而是当前 nodes 数据最后两个节点。说白了 enter()、exit() 的触发原理，是 D3.js 监听当前数据的长度变化来触发的。然而 D3.js 在获取数据长度变化之后，以 exit() 为例，对单个数据的处理方法是根据长度的减量 N 截取数据数组位置中最后 N 位到最后一位区间的所有元素，enter() 则相反，会在数组位置中最后一个元素后面增加 N 个数据。

所以，如果选中删除的是之前拓展探索出来的节点（它不是当前数据数组位置的最后一个元素），进行删除操作时，虽然从我们的 nodes 数据里面删除了这个数据，但是在已经存在的视图中，d3.select(this.nodeRef).exit() 方法定位到的操作元素却是最后一个，这样显示就乱套了，那么，我们该如何处理这个问题呢？

这里就直接分享下我的方法，简单粗暴但有效——显然这个 exit() 并不能满足删除选中节点的业务需求，那我们单独地处理需删除的节点。我们定位到真实删除的节点 DOM 进行操作，为此我们需要在渲染时给每个节点绑定一个 ID，然后再进行遍历，根据已删除的节点数据找到这些需要删除的节点对应的 DOM，以下为我们的处理代码：

  componentDidUpdate(prevProps) {
    const { nodes } = this.props;
    if (nodes.length < prevProps.nodes.length) {
      const removeNodes = _.differenceBy(
        prevProps.nodes,
        nodes,
        (v: any) => v.name,
      );
      removeNodes.forEach(removeNode => {
        d3.select('#name_' + removeNode.name).remove();
      });
    } else {
      this.labelRender(this.props.nodes);
    }
  }

其实在这里需要处理的不仅仅定位到当前真实删除节点的 DOM，还需要将它所关联的边、显示文案一并删除。因为没有起点/终点的边，是没有任何意义的，边、文案的处理方法同点删除的逻辑类似，这里不做赘述，如果你有任何疑问，欢迎前往我们的项目地址：https://github.com/vesoft-inc/nebula-web-docker 进行交流。

支持按钮缩放功能

说完删除选中点，在可视化视图中缩放操作也是比较常见的功能，D3.js 中的 d3.zoom() 就是用来实现缩放功能的，且该方法经过其他厂的业务考验相对来说成熟稳定，那我们还有什么理由要自己做呢？（要啥自行车

码农公寓

前言

构建 D3.js 力导向图

支持删除任意选中功能

支持按钮缩放功能

相关文章