Introduction and Installation
In recent years, more and more popular visualization, many newspapers and magazines, portals, news media have extensive use of visualization technology, makes complex data and text becomes very easy to understand, there is a saying "a picture worth a thousand words in "it is indeed worthy of the name. A variety of data visualization tools such as blowout development, D3 is the one of the best.
What is D3
D3 stands (Data-Driven Documents), you can know the name suggests a driven data file . Listen to the name a little abstract, and said simply, in fact, a JavaScript library, using it mainly used for data visualization. If you do not know what is JavaScript, please learn about JavaScript, recommended Ruan Yifeng teacher's tutorial.
JavaScript standard reference tutorial
JavaScript file extension is usually .js, it is also often used D3.js called D3. D3 offers a variety of easy to use functions, which greatly simplifies the difficulty of JavaScript operational data. Because JavaScript is its essence, so use all the features of JavaScript is achievable, but it can greatly reduce your workload, especially in data visualization, D3 has generated visualization of complex steps to streamline a few simple functions you only need to enter a few simple data, it can be converted into a variety of brilliant graphics. JavaScript has been based friends must be very easy to understand it.
Why Data Visualization
There are a set of data, [4, 32, 15, 16, 42, 25], you can see at a glance their size matter? Of course, there's not that much data, eye grassland have that guy stood up and said I could out of sight! But is more intuitive graphical display, as shown below:
By displaying graphics, you can clearly know their size relationship. Of course, D3 ability is far more than that, this is just a small application. The boring complex data in simple graphical representation of it, this is data visualization .
D3 how popular
D3 is an open source project, is the author of The New York Times engineer. D3 project code hosted on GitHub (a development and management platform, is already the world's most popular code hosting platform, gathered outstanding engineers from around the world).
Project on GitHub most talked about, what does?
JQuery reputation big enough, but ranked No. 6, D3 ranked No. 5.
How to learn and use D3
D3 is the best place to study: http://d3js.org/ , of course, which are in English, then this site is O (∩_∩) O ~.
D3 is a JavaScript library that does not require commonly referred to as "install." It has only one file, you can reference in HTML. There are two ways:
(1) download D3.js file: d3.zip
After decompression, contains the relevant js file in your HTML file.
(2) may further comprise a direct link to a network, this method is relatively simple:
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
However, when used to maintain the network connection is valid, the case can not be broken network.
What prior knowledge needs to learn D3
Want to turn data visualization journey through D3 friends, what prerequisites need it?
- HTML: HTML for web content settings
- CSS: Cascading Style Sheets, used to set the style pages
- JavaScript: one kind of literal scripting language that is used to set the behavior of the page
- DOM: Document Object Model to modify the content and structure of the document
- SVG: Scalable Vector Graphics, for drawing graphics visualization
Passerby: Well, I need to learn so much you can begin to learn D3? Great psychological pressure a little bit ...
Bread Chihuahua: No, absolutely can learn D3, encounters do not understand, you can look at the relevant content
Lu Renyi: HTML, CSS what, I have never used, it does not matter?
Bread Chihuahua: As long as W3School, look at these few words what this means, is used to doing, you can look at a few simple examples, it is not necessary to master the whole relearning D3.
需要什么工具
制作网页常用的工具即可。
记事本软件：Notepad++、Editplus、Sublime Text 等，选择自己喜欢的即可。
浏览器：IE9 以上、Firefox、Chrome等，推荐用 Chrome
服务器软件：Apache、Tomcat 等
其中，服务器软件可能不是必须的，不过 D3 中有些函数需要将 HTML 文件放置于服务器目录下，才能正常使用，关于这点以后会再做说明。
好了，可以开始你的 D3 之旅了。
D3.js 入门系列 — 选择元素和绑定数据
D3 允许将数据与被选择的元素绑定在一起，为根据数据来操作元素提供方便。
如何选择元素
在 D3 中，用于选择元素的函数有两个：
- d3.select()：是选择所有指定元素的第一个
- d3.selectAll()：是选择指定元素的全部
这两个函数返回的结果称为选择集，常见用法如下。
var body = d3.select("body"); //选择文档中的body元素
var p1 = body.select("p"); //选择body中的第一个p元素
var p = body.selectAll("p"); //选择body中的所有p元素
var svg = body.select("svg"); //选择body中的svg元素
var rects = svg.selectAll("rect"); //选择svg中所有的svg元素
选择集和绑定数据通常是一起使用的。
如何绑定数据
D3 有一个很独特的功能：能将数据绑定到 DOM 上，也就是绑定到文档上。这么说可能不好理解，例如网页中有段落元素 p 和一个整数 5，于是可以将整数 5 与 p 绑定到一起。绑定之后，当需要依靠这个数据才操作元素的时候，会很方便。
D3 中是通过以下两个函数来绑定数据的：
- datum()：绑定一个数据到选择集上
- data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定
相对而言，data() 比较常用。
假设现在有三个段落元素如下。
<p>Apple</p> <p>Pear</p> <p>Banana</p>
接下来分别使用 datum() 和 data()，将数据绑定到上面三个段落元素上。
datum()
假设有一字符串 China，要将此字符串分别与三个段落元素绑定，代码如下：
var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
return "第 "+ i + " 个元素绑定的数据是 " + d;
});
绑定数据后，使用此数据来修改三个段落元素的内容，其结果如下：
第 0 个元素绑定的数据是 China
第 1 个元素绑定的数据是 China
第 2 个元素绑定的数据是 China
在上面的代码中，用到了一个无名函数 function(d, i)。当选择集需要使用被绑定的数据时，常需要这么使用。其包含两个参数，其中：
- d 代表数据，也就是与某元素绑定的数据
- i 代表索引，代表数据的索引号，从 0 开始
例如，上述例子中：第 0 个元素 apple 绑定的数据是 China。
data()
有一个数组，接下来要分别将数组的各元素绑定到三个段落元素上。
var dataset = ["I like dogs","I like cats","I like snakes"];
绑定之后，其对应关系的要求为：
- Apple 与 I like dogs 绑定
- Pear 与 I like cats 绑定
- Banana 与 I like snakes 绑定
调用 data() 绑定数据，并替换三个段落元素的字符串为被绑定的字符串，代码如下：
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d, i){
return d;
});
这段代码也用到了一个无名函数 function(d, i)，其对应的情况如下：
- 当 i == 0 时， d 为 I like dogs。
- 当 i == 1 时， d 为 I like cats。
- 当 i == 2 时， d 为 I like snakes。
此时，三个段落元素与数组 dataset 的三个字符串是一一对应的，因此，在函数 function(d, i) 直接 return d 即可。
结果自然是三个段落的文字分别变成了数组的三个字符串。
I like dogs
I like cats
I like snakes