echarts力导向图节点连线动画_D3.js 力导向图的显示优化（二）- 自定义功能

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

前言

在上篇文章中（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));

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