1 背景

1.1 什么是图可视化

可视化有多种定义，我们在这里只说在计算机学科中的可视化定义：利用人眼感知能力对数据进行的可视表达以增加认知的技术，叫做可视化技术。简单的理解为：运用计算机图形学或图像处理技术，将系统中的图数据通过计算机图形学和图像处理技术，转化成图形或图像，完成信息展示、交互等功能。

1.2 图可视化优势

可视化分析的三点优势：

直观：将⽹络作为节点和连线的结构进⾏即时探索很直观。

快速：当数据以有形的形式呈现时。借助可视化技术，⽤户可以⾮常有效地发现趋势和异常值，这对图分析是很重要的。

有⻅地：与仅仅查看原始数据相⽐，可视化通过交互式地探索图形数据，方便⽤户获得更深⼊的知识并提出更多问题。

2 开发基础要素

主要包括渲染所需的绘制工具，循环，资源加载的能力。然后是基础的绘制和动画能力，也就是画布组成的基础元素。在可视化开发中，会涉及到比较多数学相关的知识，比如填充多边形，在Canvas2D 中想要填充一个多边形，只需要调用 fill，将多边形各个顶点连接非零填充即可。WebGL 实现填充则需要进行三角剖分，涉及很多图形学的底层数学知识。

备注：

填充多边形需要对 *多边形先进行三角剖分，把一个图形分割成若干个三角形，因为 WebGL 只能画点、线、三角形，对于多边形 WebGL 是无法直接处理的。

[非零填充]  www.zhangxinxu.com/wordpress/2… 

[判断点在多边形内部]  juejin.cn/post/702786…

2.1 可视化组件如何运行的

比如，我们需要在画布里面画一个圆，那么，我们需要定义圆的尺寸，以及他在画布中的坐标，以及他对应的图片或其他属性数据等，这些属于资源数据。以D3为例，我们将初始数据通过布局模型计算预加载得到对应的坐标和作用力，再提交给渲染模型，渲染模型根据这些数据内容将对应的内容渲染到画布上。

组件是动态运行的，为了实现动态加载和交互效果，我们通过动画，物体项之间的相互作用力，布局模型等工具控制数据的变化，然后通过循环来持续修改数据，并且渲染到画布实现组件的运行和最终稳定布局。

对于组件渲染，我们参考echarts及G6的做法，基于MVC模型，将展示、行为及数据进行分离，数据层主要对数据进行CRUD管理；渲染层对Canvas或SVG的生命周期及视图进行管理；控制层负责事件的交互处理。

3 最佳实践

3.1 开发实践

组件开发需要注意几个点

• 功能使用 开发功能符合实际场景，降低使用者学习成本。
• 代码逻辑 模块间解耦、数据处理与渲染分离。配置项充分暴露，灵活使用。
• 扩展性 持续迭代能力是否强、渲染瓶颈如何优化。

了解以上的内容，我们可以尝试开发一个可视化组件了，这里推荐使用D3.js， D3.js是最好的开源数据可视化框架之一，没有任何插件。它可以用于生成简单和复杂的可视化以及用户交互和过渡效果，它的一些特征如下 —

• 非常灵活。
• 易于使用和快速。
• 支持大型数据集。
• 声明性编程。
• 代码可重用性。
• 具有多种曲线生成功能。
• 将数据关联到html页面中的元素或元素组。

[D3]  d3js.org/ 

[API]  github.com/d3/d3/blob/…

我们通过开发一个气泡图demo来学习使用D3.js，代码仓库文末附带。

接下来我们要做D3.js开发可视化组件的四部操作：

Step1 添加资源

Step2 调用对应布局模版预渲染，数据转化。

Step3 添加所需要的组件

节点渲染

拖拽事件

对于上面行中的dragended：

if (!d3.event.active) simulation.alphaTarget(0);

在拖拽结束后没有它，模拟永远不会停止，在停止拖动节点后，它会永远缓慢地移动。

关于 d3.event.active 及节点的 x/y、vx/vy、fx/fy 可参考官方解释：

[API]  github.com/d3/d3-force…

[d3.event.active]  github.com/d3/d3-drag#…

缩放事件

循环渲染

Step4 画布渲染

通过数据导入组件内部，即可自动完成画布渲染流程。

总结

旨在让大家对图可视化开发有一个系统的了解。希望对前端开发同学在交互设计方案、组件快速搭建、组件开发踩坑提供一些帮助。

下一篇文章我们将基于此demo进行组件化拆分和优化。

TODO

• 代码逻辑优化 模块间解耦、数据处理与渲染分离。配置项充分暴露。
• 扩展性 配置项灵活扩展、2k+节点渲染。

代码仓库 github