D3.js

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

操作网页元素

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
Dana Silver, The d3.js Bar Chart Tutorials with Github Data