JavaScript工具庫—D3.js

D3.js是一個用于網(wǎng)頁作圖、生成互動圖形的JavaScript函數(shù)庫。它提供一個d3對象，所有方法都通過這個對象調(diào)用。

操作網(wǎng)頁元素

D3提供了一系列操作網(wǎng)頁元素的方法，很類似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對象的實例，這意味著可以采用鏈?zhǔn)綄懛ā?/p>

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代碼動態(tài)生成。

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

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

生成圖形

選中對象集

selectAll方法不僅可以選中現(xiàn)有的網(wǎng)頁元素，還可以選中不存在的網(wǎng)頁元素。

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

上面代碼表示，selectAll方法選中了.chart元素下面所有現(xiàn)有和將來可能出現(xiàn)的div元素。

綁定數(shù)據(jù)

data方法用于對選中的結(jié)果集綁定數(shù)據(jù)。

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元素還不存在，必須根據(jù)數(shù)據(jù)的個數(shù)將它們創(chuàng)造出來。style方法和text方法的參數(shù)是函數(shù)，表示函數(shù)的運行結(jié)果就是設(shè)置網(wǎng)頁元素的值。

上面代碼的運行結(jié)果是生成一個條狀圖，但是沒有對條狀圖的長度進行控制，下面采用scale.linear方法對數(shù)據(jù)長度進行設(shè)置。

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圖形生成條形圖，首先是選中矢量圖格式，然后每個數(shù)據(jù)值生成一個g元素（group），再在每個g元素內(nèi)部生成一個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