1 介绍

D3 (或者叫 D3.js )是一个基于 web 标准的 JavaScript 可视化库. D3 可以借助 SVG, Canvas 以及HTML 将你的数据生动的展现出来. D3 结合了强大的可视化交互技术以及数据驱动 DOM 的技术,让你可以借助于现代浏览器的强大功能自由的对数据进行可视化

学习了d3一个多月，通过绘制一些简单的二维图表，总算入门了d3。强烈推荐《D3数据可视化实战手册》，讲的很清晰，我的部分图表demo也是模仿它写的。

每张图表在绘制之前，首先需要在页面上创建svg对象作为画布，并预留一定的margin，因此为了方便，减少代码的冗余，我定义了一个chart对象， 该对象具有一些内置的属性和方法，不仅帮助我们在绘图前快速地初始化画布，而且还能快速的设置图表的width，height和margin等属性， 运用裁剪clip保证元素不超出画布等。

chart对象源码请狠狠点击这里

初始化后的画布结构如图， 之后的大部分图表主体部分的绘制范围都局限于body中

2 demo的代码结构

大部分每张图表都具有如下4个文件，其中data.csv用于存储源数据，index.css用于设置图表的css样式，index.html则是图表所在的页面，而index.js则是绘制图表的关键代码

index.html示例

index.css示例

data.csv示例

3 目录

D3 二维图表的绘制系列（二）基础柱状图

D3 二维图表的绘制系列（三）多列柱状图

D3 二维图表的绘制系列（四）堆叠柱状图

D3 二维图表的绘制系列（五）横向柱状图

D3 二维图表的绘制系列（六）基础折线图

D3 二维图表的绘制系列（七）堆叠面积图

D3 二维图表的绘制系列（八）曲线图

D3 二维图表的绘制系列（九）基础饼图

D3 二维图表的绘制系列（十）环状饼图

D3 二维图表的绘制系列（十一）南丁格尔图

D3 二维图表的绘制系列（十二）基础散点图

D3 二维图表的绘制系列（十三）多符号散点图

D3 二维图表的绘制系列（十四）气泡图

D3 二维图表的绘制系列（十五）雷达图

D3 二维图表的绘制系列（十六）矩形树状图

D3 二维图表的绘制系列（十七）树图

D3 二维图表的绘制系列（十八）漏斗图

D3 二维图表的绘制系列（十九）封闭图

D3 二维图表的绘制系列（二十）河流图

D3 二维图表的绘制系列（二十一）仪表盘图

D3 二维图表的绘制系列（二十二）桑基图sankey

D3 二维图表的绘制系列（二十三）旭日图

D3 二维图表的绘制系列（二十四）力导向图

D3 二维图表的绘制系列（二十五）中国地图

D3 二维图表的绘制系列（二十六）盒须图

D3 二维图表的绘制系列（二十七）日历热力图

D3 二维图表的绘制系列（二十八）关系图-弦图

D3 二维图表的绘制系列（二十九）径向树图

D3 二维图表的绘制系列（三十）平行坐标系折线图

D3 二维图表的绘制系列（三十一）热力地图（heatMap.js）