D3 学习笔记
D3 是什么？
D3 的全称是（Data-Driven Documents），顾名思义可以知道是一个被数据驱动的文档。听名字有点抽象，说简单一点，其实就是一个 JavaScript 的函数库，使用它主要是用来做 数据可视化 的。
-
JavaScript 文件的后缀名通常为 .js，故 D3 也常使用 D3.js 称呼。D3 提供了各种简单易用的函数，大大简化了 JavaScript 操作数据的难度。由于它本质上是 JavaScript ，所以用 JavaScript 也是可以实现所有功能的，但它能大大减小你的工作量，尤其是在数据可视化方面，D3 已经将生成可视化的复杂步骤精简到了几个简单的函数，你只需要输入几个简单的数据，就能够转换为各种绚丽的图形。有过 JavaScript 基础的朋友一定很容易理解它。
-
为什么要做数据可视化？
现在有一组数据， 【 4 ， 32 ， 15 ， 16 ， 42 ， 25 】 ，你能一眼看出它们的大小关系吗？当然这里的数据不算多，有那眼疾手快的家伙站出来说我能一眼看出来！但更直观的是用图形显示，如下图
可视化数据
通过图形的显示，能很清楚地知道他们的大小关系。当然，D3 能力远不止如此，这只是一个很小的应用。把枯燥乏味复杂的数据，用简单明了的图形表示出来，这就是 数据可视化。
D3 的 安装
D3 是一个 JavaScript 函数库，并不需要通常所说的“安装”。它只有一个文件，在 HTML 中引用即可。有两种方法：
-
下载 D3.js 的文件
D3.zip - 直接包含网络的链接
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
这种方法比较简单，但要保持网络连接有效。
第一个程序 hello world
- 首先，我们实现用 HTML 来实现 hello world,代码如下：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
</body>
</html>
运行该 html 文件,会在浏览器里输出
Hello World 1
Hello World 2
- 对于上面输出的内容，如果想用 JavaScript 来更改这两行文字，该怎么办？我们会将代码改为以下形式：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script>
var paragraphs = document.getElementsByTagName("p");
for (var i = 0; i < paragraphs.length; i++) {
var paragraph = paragraphs.item(i);
paragraph.innerHTML = "I like dog.";
}
</script>
</body>
</html>
这个时候我们可以看见浏览器上输出
I like dog.
I like dog.
- 现在我们使用 D3 来实现更改 hello world ，代码如下：
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
d3.select("body").selectAll("p").text("I like dog.");
</script>
</body>
</html>
在浏览器上的运行结果为：
I like dog.
I like dog.
** 我们会发现使用D3使用了非常简洁的代码实现了同样的功能。不错，其实 D3.js 中的所有功能在 JavaScript 中都能实现，它仅仅是一个函数库而已。D3 所做的事就是减轻你的工作量，以及使你的代码十分简单易懂。**
- 接下来，我们来使用 D3 改变输出字体的颜色和大小
//选择<body>中所有的<p>，其文本内容为 www.ourd3js.com，选择集保存在变量 p 中
const p = d3.select("body")
.selectAll("p")
.text("I like ");
//修改段落的颜色和字体大小
p.style("color", "red")
.style("font-size", "72px");
上面的代码是先将选中的元素赋值给变量 p，然后通过变量 p 来改变样式，这样可以使输出的内容成为你想要的样式。
通过以上的代码相信大家都可以看出 D3 有多方便了吧，这里我们介绍的只是最基础的 D3 的用法，大家如果有兴趣还可以深入学习，以下提供几个学习网站：
- 官方网站：
http://d3js.org/ - OUR D3.JS 数据可视化专题站
http://www.ourd3js.com/
