[数据可视化] D3简介

[billfeller]

一、需求背景

数据可视化是用图形图像等方式表达数据的技术，通过可视化技术让数据变动简单生动有趣。面对大数据深奥的面貌，如何才能让大数据集变得亲切和易于理解，可视化无疑是最有效的途径。

D3无疑是当今最流行的数据可视化工具之一。

二、D3技术选型

D3是一个底层使用SVG、Canvas、HTML绘图技术，通过数据驱动文档的Javascript库。D3提供的API主要包括对文档的操作，处理多种数据格式的数据、为特定的可视化布局生成数据，以及提供丰富的交互和动画功能。通过接口，开发者无需关心底层实现、也不会因为封装程度过高而难以修改，所以，D3相对Processing等底层绘图库更简单，比Echarts更自由，是一个高度灵活轻量的Web可视化工具，且不依赖其他库。当然，是否使用D3还需要根据具体情况进行选择。

考虑因素	使用范围
开源	D3基于开源协议BSD-3-Clause，可免费用于商业项目，代码托管于Github上。 截止2018.05.20，stars数已达75873次，有大量的用户使用实例
兼容性	D3 5+支持最新浏览器，比如 Chrome，Edge，Firefox 以及 Safari。 D3 4+支持 IE 9 以上的版本。 D3也可以运行在 Node 和 Web workers 中。 在 Node 环境中使用 DOM 的时候，必须要提供自己的 DOM 实现。
功能	D3擅长绘制二维矢量图表，支持丰富的交互功能，创建自定义可视化方案，不支持3D。 D3相对于封装好的图表库如Echarts、Highcharts有学习和开发成本较高的缺点。

三、D3 API总览

考虑因素	使用范围
核心函数（Core）	选择器（Selection） 过度渐变（Transitions/Easings） 颜色（Colors） 事件分发（dispatching） 拖拽（dragging) 数组（Array） 集合（Collections ） 数学（Math） 数据请求（Fetch） 格式化（Format） 几何（Paths、Polygons、Quadtrees）等
刻度尺（Axes）	基于比例尺提供人类友好的标尺刻度
比例尺（Scales）	在数据编码和视觉编码之间转换
矢量图形（SVG）	提供用于创建SVG图形的API封装
布局（Layouts）	用于可视化分层数据的布局算法，诸如力、弦、树、簇、分区、直方图、堆叠等
地理（Geo）	地理投影，形状和数学，提供诸如投影、流、地理路径、经纬度换算等
几何（Geometry）	提供绘制2D几何图形的实用工具，如多边形、泰森多边形、凸包、四叉树
行为（Behaviors）	可重用的交互行为
时间（Time）	解析或格式化时间、计算日历的时间间隔

四、更多阅读

1. d3js中文文档