见微知著 - D3JS这个极客很爱的可视化框架

一、D3是什么？

1. 全称：Data-Driven Documents - 数据驱动的文档。 github仓库

2. D3是一个被数据驱动的可视化工具库，可以帮助你使用HTML、CSS、SVG和Canvas来展示数据。

3. D3可以将数据绑定到DOM上，然后根据所绑定的数据来计算对应DOM的属性值。（你可以根据一组数据生成一个表格，或生成一个可以过渡和交互的SVG图形等。)

二、D3的优势

1. 数据能够和Dom绑定在一起，使得数据和图形成为一个整体。在更改图形时，只需对数据操作，图形便会相应的更新。

2. D3自由度度很大，基本可以自己绘制任何想要的图形，这类情况的需求可以使用D3进行二次开发，定制适合的图表，但是开发成本会稍高。因此，开发中要根据实际情况来判断。无论采用哪种方式开发都要做好二次封装，把实现的图表成可复用的组件。

3. 数据转换和绘制是独立的：例如将数据转换为图表，需要不少的数学算法。在多种方案之中，D3独立地提供了数据转换和图表绘制的工具函数，即将开发者的数据转换为图表绘制工具函数所需的数据格式，然后按照开发者的需求进行绘制。

4. 代码简洁：采用了链式调用的方式简化图形的绘制。

5. 大量布局工具：饼状图、树形图、打包图、矩阵图等。D3将大量复杂的算法封装成了一个一个的布局，适用于各种的图表制作。

6. 主要基于Svg，缩放不会损失精度。

三、D3与ECharts的对比

1. D3可定制自由度高,而ECharts不可定制，自由度低。

2. D3英文文档完善，使用事例只能参考，而ECharts中文文档完善、使用例子功能完善。

3. D3需要开发，效率低，ECharts可以快速配置生成图表。

4. D3较难，必须熟悉Svg、Canvas、D3Api, ECharts 只需配置。

四、D3的使用场景

1. ECharts等配置式图表库无支持图表时使用。

2. 数据量不是特别大或者事件交互比较精细的场景采用D3，可以先在官方示例和demo搜索有没有类似的图表实现。

3. 对于频繁的DOM操作十分消耗性能。对于用户体验的影响便是可能出现闪烁、卡顿等现象。可以参考前端界对于页面DOM卡顿的解决方案：Virtual DOM 技术。通过支持 Virtual Dom 技术的框架如Vue与 D3.js结合。使用D3来计算，Vue等Virtual DOM框架管理SVG节点和属性。

4. 对于数据量比较大的场景，可以采用D3Canvas来实现，或者ZRender（ECharts使用的矢量图形库）来定制，这个需要比较熟悉Canvas绘图，而且需要注意性能的优化。

五、D3的开发流程

1. 根据需求确定图表类型。

2. 把输入的原始数据转化为标准的D3可接受的数据格式。

3. 根据原始数据定义好x轴函数、y轴函数和定义好作图方式在Svg上，画出x轴y轴、根据原始数据结合x轴和y轴函数做图。

4. 画出标题等细节东西。

5. 给已经完成的图形添加动画效果和时间交互。

六、D3的版本更替

1. D3现存三种版本：V3、V4、V5。

2. 在V3更新到V4的时候大刀阔斧地规范了一些方法，各个Api的调用形式有不同的变化。

3. 相比V3到V4的变化，V4到V5只有少量向前不兼容的改动。

/* v3 比例尺 */
d3.scale.linear()
/* v4 比例尺 */
d3.scaleLinear()

七、D3的使用实例 earth-master

1. 该项目使用D3Geo模块进行地球的渲染。

<