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/)