数据可视化(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!");

结果如下图

数据可视化(7)--D3基础

详细的解释

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; });

结果如下

数据可视化(7)--D3基础

我们用数据填充了每个段落,机关都在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;
});//设置圆的边缘线的宽度

结果如下图

数据可视化(7)--D3基础

比例尺

“比例尺是一组把输入域映射为输出范围的函数。”

先创建比例尺,设定值域为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]);
});

效果如下

数据可视化(7)--D3基础

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

效果如下

数据可视化(7)--D3基础

略难看,而且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);

效果如下

数据可视化(7)--D3基础

然后添加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轴");

最终效果如下

数据可视化(7)--D3基础

D3的基础今天就到这里~~

有时间的话,推荐读一下《数据可视化实战》~~

上一篇:log4net将日志写入ElasticSearch


下一篇:C# log4net 日志写入到数据库