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 目录
扫描二维码关注公众号，回复：
9300309 查看本文章
