数据可视化技术实现的关键点

原文地址：https://geekplux.com/2019/10/06/how-to-implement-data-visualization

题目想了半天，最后定了这个，也不知道有没有准确表达我的意思。其实本文主要想分享我做数据可视化这么久之后积累的一些经验，重点在技术实现这个层面。

在已经确定要实现一个可视化视图之前，你一定已经经历了思考和设计，拿到了一张确定的设计图或者原型图，所以这里就不赘述可视化在实现前的那些步骤了，直奔如何编程实现的主题。

实现前的规划

拿到一张设计图之后，和做前端切图差不多，你基本上要先做规划：

整个视图可以切分成几部分。可能一个视图包含了条形图、折线图、热力图和非常复杂的网络图等，这些混杂在一起的时候，切分视图很重要。如何保证实现起来方便。而且由于他们之间可能还有联动，所以如何设计共享的数据状态也很重要，否则后期会出现很多硬编码的情况（例如直接全部遍历高亮改颜色之类的操作）这种动不动循环很容易时间复杂度上O(n2)及以上，影响性能。
一共有多少种元素。哪些元素是在上层，哪些是在下层。每种元素画出来的时候需要几种数据。比如画圆形的时候你除了考虑圆心位置还要考虑半径是表达哪个数据维度、颜色又是哪个、饱和度是哪个。
元素之间的链接，语义或位置上的联系是什么。最常见的比如两个矩形之间的线段是怎么连上的，是在中心位置还是顶点位置。还有哪些元素是可以 group 在一起的等等。

以下图为例：