当前位置: 主页 > 开发笔记 >

优化D3.js 力导向图

作为一个前端,说到可视化除了听过 D3.js 的大名,常见的可视化库还有 ECharts、Chart.js,这两个库功用也很强壮,可是有一个一起特点是封装层次高,留给开发者可规划和操控的部分太少。和 EChart、Chart.js 等比较,D3.js** 的相对来说自由度会高许多,得益于 D3.js **中的 SVG 画图对事情处理器的支撑,D3.js 可将恣意数据绑定到文档目标模型(DOM)上,也能够直接操作目标模型(DOM)完结 W3C DOM API 相关操作,对于想要展现自己规划图形的开发者,D3.js 肯定是一个不错的挑选。

以完成一个联系网来说,d3-force 力导向图是不二的挑选。d3-force 是 D3.js 完成以模仿粒子物理运动的 velocity Verlet 数值积分器的模块,可用来操控粒子和边次序。在力导向图中,d3-force 中的每个节点都能够看成是一个放电粒子,粒子间存在某种斥力(库仑斥力)。同时,这些粒子间被它们之间的“边”所牵连,然后产生牵引力。

下图便是最简略的联系网图,想要完成自己想要的联系网图,仍是动手自己完成一个 D3.js 力导向图最佳。

构建 D3.js 力导向图

下面,咱们来完成一个简略的力导向图,初窥 D3.js 对数据剖析的效果和显现优化的一些思路。首先咱们创立一个力导向图:

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));

image

看到联系图(上图),咱们会发现有一个新需求:选中节点继续往下拓宽查询。为了完成拓宽查询,在这儿笔者要介绍下 D3.js 自带 API。

但由于d3.forceSimulation().node()  的坐标随机分配导致了图形拓宽出来方位的随机呈现,加上之前 d3-force 实例中咱们设定好的 collide(磕碰力)和 links (引力)参数,所以和新节点相相关的节点遭到牵引力影响相互接近。在接近的过程中又会和其他节点发送磕碰力的效果,当力导图存在的节点的情况下,这些新增节点呈现时会让整个力导向图在 collide 和 links 的效果下不停地磕碰,进行牵引,直到每个节点都找到自己适宜的方位,即磕碰力和牵引力都满足要求时才停止移动,看看下图,像不像宇宙大爆炸

  • 发表于: