数据可视化(7)--D3基础
一直想写写D3，觉得D3真心比较强大，基本上你能想出来的图表都能绘制出来，只不过使用起来比前几个要稍麻烦一点。
正好最近读完了《数据可视化实战》，将关于D3的知识梳理了一遍，写这篇博客记录一下。
D3 是一个缩写，它的全称叫Data-Driven Documents（数据驱动的文档）。D3是基于数据操作文档的JavaScript库。D3帮助你使用HTML，SVG和CSS生动的展现数据。D3不需要将你使用某个特定的框架，D3重点在于对主流浏览器的全兼容，同时结合了强大的虚拟化组件，以数据驱动的方式去操作DOM。
D3支持所谓的主流浏览器除了IE8及以前的版本。D3测试了火狐，Chrome、Safari、Opera和IE9。D3的大部分组件可以在旧的浏览器运行，D3核心库的最低运行要求：支持JavaScript和W3C DOM API.对于IE8，建议使用兼容性库Aight库.D3采用的是Selectors API的第一级标准，你要是考虑兼容性可以预加载Sizzle库。你得使用主流的浏览器以便可以支持SVG和CSS3的转场特效。
官网地址：http://d3js.org/
下载官方包 d3.v3.zip 或者添加如下代码：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
数据
var dataset = [1,2,3,4,5]; d3.select("body").selectAll("p") .data(dataset) .enter() .append("p") .text("New paragraph!");
结果如下图
详细的解释
d3.select("body")
选择DOM 中的body 元素，把它交给连缀方法中的下一个方法。
.selectAll("p")
选择DOM 中的所有段落。因为还没有段落，所以返回空元素。可以认为这个空元素代表马上就会创建的段落。
.data(dataset)
解析并数出数据值。dataset 数组中有5 个值，因而此后的所有方法都将执行五遍，每次针对一个值。
.enter()
要创建新的绑定数据的元素，必须使用enter()。这个方法会分析当前选择的DOM 元素和传给它的数据，如果数据值比对应的DOM 元素多，就创建一个新的占位元素。然后把这个新占位元素的引用交给链中的下一个方法。
.append("p")
取得由enter() 创建的空占位元素，并把一个p 元素追加到相应的DOM 中。然后它再把自己刚创建的元素交给链中的下一个方法。
.text("New paragraph!")
取得新创建的p 元素，插入文本值。
将最后一行修改为
.text(function(d) { return d; });
结果如下
我们用数据填充了每个段落，机关都在data() 方法里。在连缀方法中，只要调用data() 了，就可以随时创建一个接收d 为输入的匿名函数。与当前元素对应，方法data() 确保了每个d 都会被赋予原始数据集中的一个值。随着D3 遍历每个元素，“当前元素”的这个值也会跟着变化。比如，循环到第三次时，代码会创建第三个p 元素，而d 就会被赋予数据集中的第三个值（即dataset[2]）。于是，第三个段落的文本就是“15”。
SVG绘制
首先要创建一个SVG 元素，以便在其中保存所有图形，先找到文档的body 元素，然后在结束的</body> 标签前添加一个新的svg 元素，并设置长宽，代码如下
var svg = d3.select("body") .append("svg") .attr("width", 500) .attr("height", 50);
添加一些数据
var dataset = [ 5, 10, 15, 20, 25 ];
使用data() 迭代每个数据点，为它们分别创建一个圆形
var circles = svg.selectAll("circle") .data(dataset) .enter() .append("circle");
最后设置图形的样式
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})//设置x的位置
.attr("cy", 50 / 2)//设置y的位置
.attr("r", function(d) {
return d;
})//设置圆的半径
.attr("fill", "yellow")//设置填充颜色
.attr("stroke", "orange")//设置圆的边缘线颜色
.attr("stroke-width", function(d) {
return d / 2;
});//设置圆的边缘线的宽度
结果如下图
比例尺
“比例尺是一组把输入域映射为输出范围的函数。”
先创建比例尺，设定值域为100~500和实际范围10~350，代码如下
var scale = d3.scale.linear() .domain([100, 500]) .range([10, 350]);
可以测试一下scale
scale(100); // 返回10 scale(300); // 返回180 scale(500); // 返回350
添加数据集
var dataset = [ [5, 20], [480, 90], [250, 50], [100, 33], [330, 95], [410, 12], [475, 44], [25, 67], [85, 21], [220, 88] ];
可以根据d3的max()和min()方法创建一个动态映射轴值的比例尺函数，max() 函数只是简单地循环数组中的每个值，然后找出其中最大的那个。min()则是找出其中最小的那个。
定义比例尺函数，其中w是svg宽，h是svg高。
var w = 500; var h = 100; var xScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[0]; })]) .range([0, w]); var yScale = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([0, h]);
使用比例尺函数处理数据，并到svg中显示
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", function(d) {
return d[0];
})
.attr("cy", function(d) {
return d[1];
})
.attr("r", function(d) {
return Math.sqrt(h - d[1]);
});
效果如下
d3.scale.linear() 还有几个非常方便的方法。
nice()
告诉比例尺取得为range() 设置的任何值域，把两端的值扩展到最接近的整数。根据D3 的维基：“比如，值域[0.20147987687960267, 0.996679553296417]的优化值域为[0.2, 1]。”这个方法对正常人都有用，因为人不是计算机，看到0.20147987687960267 这样的数你一定会头大。
rangeRound()
用rangeRound() 代替range() 后，则比例尺输出的所有值都会舍入到最接近的整数值。对输出值取整有利于图形对应精确的像素值，避免边缘出现模糊不清的锯齿。
clamp()
默认情况下，线性比例尺可以返回指定范围之外的值。例如，假如给定的值位于输入值域之外，那么比例尺也会返回一个位于输出范围之外的值。不过，在比例尺上调用clamp(true) 后，就可以强制所有输出值都位于指定的范围内。这意味着超出范围的值，会被取整到范围的最低值或最高值（总之是最接近的那个值）。
除了线性（linear）比例尺，D3 还内置了另外几个比例尺方法。
sqrt
平方根比例尺。
pow
幂比例尺，适合值以指数级变化的数据集。
log
对数比例尺。
quantize
输出范围为独立的值的线性比例尺，适合想把数据分类的情形。
quantile
与quantize 类似，但输入值域是独立的值，适合已经对数据分类的情形。
ordinal
使用非定量值（如类名）作为输出的序数比例尺，非常适合比较苹果和桔子。
d3.scale.category10()、d3.scale.category20()、d3.scale.category20b() 和d3.scale.category20c()
能够输出10 到20 种类别颜色的预设序数比例尺，非常方便。
d3.time.scale()
针对日期和时间值的一个比例尺方法，可以对日期刻度作特殊处理。
数轴
接着上面的例子进行，创建数轴
var xAxis = d3.svg.axis()//创建通用的数轴函数 .scale(xScale)//基于xScale比例尺工作 .orient("bottom");//设置标签相对数轴显示在什么地方。默认位置是底部。
在SVG 中生成数轴，放在脚本底部，以便在SVG 中的其他元素都生成之后再生成数轴，这样数轴就可以出现在“上面”了。
svg.append("g")
.attr("class", "axis") // 指定"axis" 类
.call(xAxis);
效果如下
略难看，而且x轴的位置也不对。
修整一下数轴，在<head> 中的<style> 标签里写两条CSS 样式规则。
.axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; }
用到SVG 变换（transform）了。添加一行代码，把整个数轴分组平移到图表下方，详细如下
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (h - 20) + ")")
.call(xAxis);
效果如下
然后添加Y轴，做一些调整，最后JS文件如下
var margin = {top: 20, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var dataset = [ [ 5, 20 ], [ 480, 90 ], [ 250, 50 ], [ 100, 33 ], [ 330, 95 ], [ 410, 12 ], [ 475, 44 ], [ 25, 67 ], [ 85, 21 ], [ 220, 88 ] ]; var x = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[0]; })]) .range([0, width]); var y = d3.scale.linear() .domain([0, d3.max(dataset, function(d) { return d[1]; })]) .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.selectAll("circle") .data(dataset) .enter() .append("circle") .attr("cx", function(d) { return x(d[0]); }) .attr("cy", function(d) { return y(d[1]); }) .attr("r", function(d) { return 10; }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .append("text") .attr("class", "label") .attr("x", width) .attr("y", -6) .style("text-anchor", "end") .text("X轴"); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("class", "label") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Y轴");
最终效果如下
D3的基础今天就到这里~~
有时间的话，推荐读一下《数据可视化实战》~~
