学习D3并不容易，需要比较多的基础知识，像JS、HTML、SVG等都必需要掌握的，同时还需要有不错的逻辑思考能力。但如果你能知道D3的原理，从本质上理解D3究竟是什么，那么无论是学习还是使用D3都会更加轻松容易。
D3.js
那么D3究竟是什么呢？初学者及使用不深的开发人员可能不容易理解它，只知道可以用它开发图表。
从字面上讲D3是Data-Driven Documents的缩写，即数据驱动文本，这里说的文本是web页面的DOM元素。官方的解释为 D3是一个可基于数据操作文本的js库，它可以帮助你使用HTML、SVG和CSS让数据鲜活起来，并且提供了很多可视化组件，以及数据驱动管理DOM的方法。
单纯从上面的描述中是很难真正理解D3的本质的，下面我们就几个方面好好的说一下D3究竟是什么。
D3.js不是什么
或许要解答一个东西是什么，先从反面说一下它不是什么会更容易些。D3.js的目的是使用图表展示数据，而这方面的js库也非常多，最有名的可能就是百度的ECharts，并且它们也的确都非常优秀，使用也更加简单。如果你要使用这些js图表库，只要选择你想要的图表类型，然后按照它的格式要求给它数据就可以了，相反D3却要麻烦很多。
那么为什么还要选择D3呢？因为，D3与它们并不是同一类产品，D3是相对更加底层的JS库。
ECharts等图表库就好比是一个模板，你只要选择喜欢的模板，然后往里填充自己的东西即可。可模板毕竟是模板，不够灵活，如果它们能满足你的需求那是最简单的，直接用就可以，但如果模板无法满足你的需求时你要怎么办？或许你会想，自己修改需要修改的地方就可以了。可这真的没有那么简单。它们并不像PPT、Word的模板那样，套用后每页都可以轻松修改内容，处处都是看得见，摸得着，想怎么改都行。但图表库这些东西，你要想修改它的样子，你就必须要明白它是怎么实现的：它实现图表的技术是什么，结构是怎么样的，代码在哪里写的，逻辑是怎么样的，怎么样修改才不会造成各种影响……到最后如果能修改还好，但如果发现根据就无法修改，那可就真是头都大了。
D3.js是一支画笔
与模板相对而言，D3更像是一支画笔，你可以得到任何你想要的图形图表。与画家画画一样，只要你的基本功过关，就可以随心所欲画出你想要的东西。当然，使用画笔作画比向给定的轮廓（模板）里填充颜色要困难多了，因为每一个线条、每一处阴影等等任何东西都需要你自己考虑怎么绘制。所以在你选择学习D3之前，要先想明白你要的究竟是什么。
为了更好的理解，我们还可以说其它图表库是美图秀秀，而D3是PhotoShop或Illustrator；其它图表库就好比是各种app，而D3就好比是编程语言--实际上现在有许多js图表库或多或少都是用D3来“编程”实现的，C3就是其中一个。
如果D3是一支画笔，那用它作画的颜料是什么？D3是在浏览器这个画板上作画的，它的颜料自然就是HTML、SVG和CSS了，当然，现在Canvas也可以用来作画了。与那些“模板”相比，D3最大的区别就在于你需要自己处理图表具体怎么绘制，你要思考怎么把数据转换成图表需要的属性，如宽高、位置、角度等等。当然，D3也提供了很多工具和组件来实现这些需求。
最终你的画作要传达的意境，便是赋予了生命的数据。
如何用好这支画笔
思路清晰是最重要的前提，固定的步骤可以帮助保持清晰的思路。我把使用D3开发图表分为以下几个步骤：
- 明确图表意义
图表形状、形式可能是由别人来设计的，所以要首先明确图表的意义，即它是如何表达数据的，或者说与数据之间的对应关系是怎么样的。
- 确定图表结构及内容
即分析好使用什么元素来展现图表，以及如何组装这些元素。例如你选择使用柱状图来表达数据，你首先要决定使用什么元素来绘制柱形，你可以选择使用div元，也可以使用SVG的rect或path等，选择的原则是“容易实现”。
- 数据数量与图表元素关联
使用图表来表达数据的好处之一就是容易分辨数据与数据之间的关系，所以通常不会只有一条数据存在。根据图表的意义与图表结构，使数据与图表产生关联。如果你选择使用rect元素来绘制柱状图中的柱子，那么每一条数据就关联一个rect元素，即有多少条数据，就应当有多个个柱子。
- 数据值转换成图表元素所需的属性值
组成图表的元素即是用来展现数据的数值信息的，根据图表的意义将数据的值使用图表元素来表现。如柱状图中使用柱子的高低表现数值的大小，如果柱子是用rect元素绘制，那么它的高低便是用rect的属性(height)控制的，这时就需要把数据的值转换成rect的属性值。
