d3.js数据可视化从入门到放不下（一）

背景

• D3：指数据驱动文档（Data-Drive Document），D3严格遵循Web标准；
• d3.js：可以把D3理解为一种思路或者说是“风格”，d3.js正是基于这种“风格”开发的JavaScript库。

说到JavaScript的库，就不得不提起jQuery，作为最知名的JavaScript库，没有之一。即使是在现今前端主流SPA框架盛行的情况下，它仍然有这不可替代的地位。它提供了及其简便的API来替代原生JavaScript中低难度却高度重复的DOM操作方法。

同样，d3.js也是一个JavaScript库，它提倡用数据来操作文档的思想。

在大数据时代，如果说对海量数据的爬取、挖掘，以及清洗和分析是服务端工程师必须要掌握的技能。那对于前端工程师？作为离用户最近的程序员，前端工程师的职责便是该以何种方式将海量数据更好、更直观的呈现在用户面前。HTML5给我们提供了强大的Canvas组件，让前端界面元素的展示拥有了更多可能性。大名鼎鼎的Echarts便是基于此来实现的。

之所以选择d3.js而不是Echarts原因在于，Echarts作为应用及其广泛的开源的图表组件库，我们无需关注其底层实现逻辑，多数情况下，只要知道如何应用就好。正因如此，它虽然提供了丰富的组件，但是在灵活性方面稍显不足。d3.js更偏底层基础，我们可能用它在页面上实现无限可能，它可以让我们随心所欲的绘制我们真正想要的图标或是效果。

搭建基本环境

为了模拟真实的开发环境并方便后续的开发，推荐搭建一个简易的本地HTTP服务器。
安装http-server模块：

npm install http-server -g 

上面命令行中的-g参数为把http-server设置为全局模块，这样至于要你需要的位置执行：

http-server

命令即可在当前目录架起一个建议的HTTP服务。

基本概念

• 选集：用来定位页面上的特定视觉元素，类似于jQuery的选择器。事实上，具体语法也差不多，比如：

<p id='target'></p>
<script>
	d3.select('