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/

D3 学习笔记

D3 是什么？

D3 的 安装

第一个程序 hello world

推荐阅读更多精彩内容

D3 的安装