一、D3是什么

D3的全称是Data-Driven Document，可见D3是一个基于数据来操作文档的js库。他可以帮助你使用HTML，CSS，SVG甚至是Canvas来展示数据。D3操作SVG的写法像是JQuery，可以对元素添加删除和属性设置，不过D3可以将数据绑定到DOM上，然后根据数据来计算DOM的展示效果，这就是D3的数据驱动。D3不依赖任何库，而且D3不只是一个单独的库，你可以按需加载D3中任意一个单独的模块去使用。

二、D3能做什么

我们可以看看D3的官方示例库，里面不但可以实现动画，交互，有我们常用的柱图，线图，甚至是一些复杂，另类的图表也可以实现出来。

三、其他图表库

说到可视化图表我们最常用的就是Echarts，这个大家都很清楚，上手难度非常低，但是定制化程度也低，往往有想要实现产品的一些特殊的需求，就需要绞尽脑汁的想各种奇淫巧技。

还有就是G2，我没用过，只是大概的去了解了一下，它把图表分成了，图形组件（坐标轴、图例、提示信息等）和几何形状（点、线、面），你可以把数据映射到任意的元素上，然后拼凑成想要的图表。显然自由度就比Echarts高一些，同时上手的难度也要高一些，适合团队根据ui需求封装成自己的图表库。

D3的话就我们可以在接下来内容中来了解了解。

四、D3的使用步骤

下面张图完美的诠释了使用D3去绘制一个图表的所有步骤。

• 先得要有数据，获得json或者csv的数据。
• 定义图表的尺寸和边距。
• 定义你要绘制图表的画布。
• 创建图表的比例尺，设置物理像素到图表数据的比例。
• 使用对应的图表绘制你的数据。
• 给图表添加一些额外的元素，坐标轴、图例、提示框等。
• 最后给你的图表加上相应的交互。

有了上述的步骤我们应该就了解了D3绘制一个图表的过程，接下来我们就一步步的来实现出我的的第一个D3图表。