持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第 16 天，点击查看活动详情

了解可视化框架

1、D3.js

D3 的全称是（Data-Driven Documents）。D3 .js是一个JavaScript库（是一个被数据驱动的文档），用于在浏览器中创建交互式可视化。

D3.js库允许我们在数据集的上下文中操作网页的元素.这些元素可以是HTML，SVG，或画布元素，可以根据数据集的内容进行引入，删除或编辑.它是一个用于操作DOM对象的库. D3.js可以成为数据探索的宝贵帮助，它可以让您控制数据的表示，并允许您添加交互性.

2、highcharts

Highcharts 是一个用纯JavaScript编写的一个图表库， 能够很简单便捷的在web网站或是web应用程序添加有交互性的图表,HighCharts支持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表。

3、echarts

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

4、兼容性

Highcharts 兼容 IE6 及以上的所有主流浏览器，完美支持移动端缩放、手势操作。

Echarts 兼容 IE6 及以上的所有主流浏览器，同样支持移动端的缩放和手势操作。

D3 兼容IE9 及以上的所有主流浏览器，对于移动端的兼容性也同上。

也就是说，这三个插件都兼容IE9及以上的所有主流浏览器，但如果开发需求中包括IE7/IE8，那么就只能选择Highcharts或者Echarts了。

5、是否免费/开源

Highcharts 非商业免费，商业需授权，代码开源。

Echarts 完全免费，代码开源。

D3 完全免费，代码开源。

6、难度

Highcharts 基于SVG，方便自己定制，但图表类型有限。

Echarts 基于Canvas，适用于数据量比较大的情况。

D3.v3 基于SVG，方便自己定制；D3.v4支持Canvas+SVG，如果计算比较密集，也可以选择用Canvas。除此之外，D3图表类型非常丰富，几乎可以满足所有开发需求，但代码相对于以上两个插件来说，会稍微难一点。

7、性能优化

在同一图层内，可以容纳大量数据绘制，性能较好，但不支持每个对象的变化

不同图层，大量数据绘制效果较差，但支持每个对象的变化

最差的情况，每次删除所有图层，再创建图层，重新绘制

8、正确理解Repaint和Reflow

Repaint 和 Reflow 也就是重绘和重排，Repaint(重绘)就是在一个元素的外观被改变，但没有改变布局(宽高)的情况下发生，如改变visibility、outline、背景色等等。

Reflow(重排)就是DOM的变化影响到了元素的几何属性（宽和高），浏览器会重新计算元素的几何属性，会使渲染树中受到影响的部分失效，浏览器会验证DOM树上的所有其它结点的visibility属性，这也是Reflow低效的原因。如：改变窗囗大小、改变文字大小、内容的改变、浏览器窗口变化，style属性的改变等等。如果Reflow的过于频繁，CPU使用率就会噌噌的往上涨，所以前端也就有必要知道 Repaint 和 Reflow的知识。

上面提到通过设置style属性改变结点样式的话，每设置一次都会导致一次reflow，所以最好通过设置class的方式；有动画效果的元素，它的position属性应当设为fixed或absolute，这样不会影响其它元素的布局；如果功能需求上不能设置position为fixed或absolute，那么就权衡速度的平滑性。

总之，因为 Reflow 有时确实不可避免，所以只能尽可能限制Reflow的影响范围。