d3.md

title	layout	category	date	modifiedOn
D3.js	page	library	2014-01-06	2014-01-06

D3.js是一个用于网页作图、生成互动图形的JavaScript函数库。它提供一个d3对象，所有方法都通过这个对象调用。

操作网页元素

D3提供了一系列操作网页元素的方法，很类似jQuery，也是先选中某个元素（select方法），然后对其进行某种操作。

{% highlight javascript %}

var body = d3.select("body"); var div = body.append("div"); div.html("Hello, world!");

{% endhighlight %}

select方法用于选中一个元素，而selectAll方法用于选中一组元素。

{% highlight javascript %}

var section = d3.selectAll("section"); var div = section.append("div"); div.html("Hello, world!");

{% endhighlight %}

大部分D3的方法都返回D3对象的实例，这意味着可以采用链式写法。

{% highlight javascript %}

d3.select("body") .style("color", "black") .style("background-color", "white");

{% endhighlight %}

需要注意的是append方法返回一个新对象。

{% highlight javascript %}

d3.selectAll("section") .attr("class", "special") .append("div") .html("Hello, world!");

{% endhighlight %}

生成svg元素

`D3作图需要svg元素，可以用JavaScript代码动态生成。

{% highlight javascript %}

var v = d3.select("#graph") .append("svg");

v.attr("width", 900).attr("height", 400);

{% endhighlight %}

生成图形

选中对象集

selectAll方法不仅可以选中现有的网页元素，还可以选中不存在的网页元素。

{% highlight javascript %}

d3.select(".chart") .selectAll("div");

{% endhighlight %}

上面代码表示，selectAll方法选中了.chart元素下面所有现有和将来可能出现的div元素。

绑定数据

data方法用于对选中的结果集绑定数据。

{% highlight javascript %}

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; });

{% endhighlight %}

上面代码中，enter方法和append方法表示由于此时div元素还不存在，必须根据数据的个数将它们创造出来。style方法和text方法的参数是函数，表示函数的运行结果就是设置网页元素的值。

上面代码的运行结果是生成一个条状图，但是没有对条状图的长度进行控制，下面采用scale.linear方法对数据长度进行设置。

{% highlight javascript %}

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; });

{% endhighlight %}

操作SVG图形

使用SVG图形生成条形图，首先是选中矢量图格式，然后每个数据值生成一个g元素（group），再在每个g元素内部生成一个rect元素和text元素。

{% highlight javascript %}

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; });

{% endhighlight %}

加载XML文件

{% highlight javascript %}

d3.xml('example', 'image/svg+xml', function (error, data) { if (error) { console.log('加载SVG文件出错！', error); } else { // 处理SVG文件 } });

{% endhighlight %}

参考链接

• Mike Bostock, Let’s Make a Bar Chart
• Dana Silver, The d3.js Bar Chart Tutorials with Github Data