文档介绍：力导向图的显示优化（二）- 自定义功能
       
 
 
 
 
 
 
 
     
     
     
 
 
 
摘要：在本文中，我们将借助的灵活性这一优势，去新增一些本身并不支持但我们想要的一些常见的功能：Nebula Graph 图探索的删除节点和缩放功能。
文章首发于 Nebula Graph 官博：https://nebula--js-examples-for-advaned-uses/
D3显示优化
前言
在上篇文章中（力导向图的显示优化），我们说过在自定义图形上相较于其他开源可视化库的优势，以及如何对文档对象模型（DOM）进行灵活操作。既然辣么灵活，那是不是实现很多我们想做的事情呢？在本文中，我们将借助的灵活性这一优势，去新增一些本身并不支持但我们想要的一些常见的功能。
构建力导向图
在这里我们就不再细说 d3-force 粒子物理运动模块原理，感兴趣同学可以看看我们的上篇的简单描述, 本次实践我们侧重于可视化操作的功能实现。
好的，进入我们的实践时间，我们还是以力导向图对图数据库的数据关系进行分析为目的，增加一些我们想要功能。
首先，我们用 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
这里我们简单介绍下上图，上图为图数据库 Nebula Graph 可视化工具 Studio 的图探索功能截图，在业务上，图探索支持用户任意选中某个点进行拓展，找寻、显示同它存在某种关系的点，例如上图点 100 和点 200 存在单向 follow 关系。
上图数据量并不大，如果我们在拓展时返回的数据量较大或多步拓展出来的数据逐步累加显示，则会导致当前视图页节点和边极多，页面需呈现的数据信息量大，且也不好找到想要的某个节点。好的，一个新场景上线了：用户只想分析图中的部分节点数据，不想看到全部的节点信息。删除任意选中这个新功能就可以很好地应对上面场景，删除不需要的节点信息，只留下想探索的部分节点数据。
支持删除任意选中功能
在实现这个功能之前，