11.4 D3.js
最后更新于：2022-04-01 05:09:05
D3.js是一个用于网页作图、生成互动图形的JavaScript函数库。它提供一个d3对象，所有方法都通过这个对象调用。
[TOC]
## 操作网页元素
D3提供了一系列操作网页元素的方法，很类似jQuery，也是先选中某个元素（select方法），然后对其进行某种操作。
~~~
var body = d3.select("body");
var div = body.append("div");
div.html("Hello, world!");
~~~
select方法用于选中一个元素，而selectAll方法用于选中一组元素。
~~~
var section = d3.selectAll("section");
var div = section.append("div");
div.html("Hello, world!");
~~~
大部分D3的方法都返回D3对象的实例，这意味着可以采用链式写法。
~~~
d3.select("body")
.style("color", "black")
.style("background-color", "white");
~~~
需要注意的是append方法返回一个新对象。
~~~
d3.selectAll("section")
.attr("class", "special")
.append("div")
.html("Hello, world!");
~~~
## 生成svg元素
`D3作图需要svg元素，可以用JavaScript代码动态生成。
~~~
var v = d3.select("#graph")
.append("svg");
v.attr("width", 900).attr("height", 400);
~~~
## 生成图形
### 选中对象集
selectAll方法不仅可以选中现有的网页元素，还可以选中不存在的网页元素。
~~~
d3.select(".chart")
.selectAll("div");
~~~
上面代码表示，selectAll方法选中了.chart元素下面所有现有和将来可能出现的div元素。
### 绑定数据
data方法用于对选中的结果集绑定数据。
~~~
var data = [4, 8, 15, 16, 23, 42, 12];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return d * 10 + "px"; })
.text(function(d) { return d; });
~~~
上面代码中，enter方法和append方法表示由于此时div元素还不存在，必须根据数据的个数将它们创造出来。style方法和text方法的参数是函数，表示函数的运行结果就是设置网页元素的值。
上面代码的运行结果是生成一个条状图，但是没有对条状图的长度进行控制，下面采用scale.linear方法对数据长度进行设置。
~~~
var data = [4, 8, 15, 16, 23, 42, 12];
var x = d3.scale.linear()
.domain([0, d3.max(data)])
.range([0, 420]);
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width", function(d) { return x(d) + "px"; })
.text(function(d) { return d; });
~~~
## 操作SVG图形
使用SVG图形生成条形图，首先是选中矢量图格式，然后每个数据值生成一个g元素（group），再在每个g元素内部生成一个rect元素和text元素。
~~~
var width = 840,
barHeight = 20;
var x = d3.scale.linear()
.domain([0, d3.max(dataArray)])
.range([0, width]);
var chart = d3.select(".bar-chart-svg")
.attr("width", width)
.attr("height", barHeight * dataArray.length);
var bar = chart.selectAll("g")
.data(dataArray)
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });
bar.append("rect")
.attr("width", x)
.attr("height", barHeight - 1);
bar.append("text")
.attr("x", function(d) { return x(d) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d; });
~~~
## 加载XML文件
~~~
d3.xml('example', 'image/svg+xml', function (error, data) {
if (error) {
console.log('加载SVG文件出错！', error);
}
else {
// 处理SVG文件
}
});
~~~
## 参考链接
* Mike Bostock, [Let’s Make a Bar Chart](http://bost.ocks.org/mike/bar/)
* Dana Silver, [The d3.js Bar Chart Tutorials with Github Data](http://danasilver.org/2013/12/31/d3-github-language-stats/)