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