D3.js（入门篇）

简介

D3.js（后面简称D3，官方首页https://d3js.org/）是基于JavaScript开发的一套用于数据可视化工具，项目开源在GitHub，项目排名靠前。它提供了很多API，如DOM（Document Object Model）的一些操作，绘制图形等。截止本文发表时间，D3已更新到v4，v4在v3的基础上，有了很大的改变（因为v3只支持通过svg和dom构图，所以v4在v3的基础上增加了对Canvas的支持以及API的修改）,本文使用的版本为v3的API。

Hello World

<!DOCTYPE html>
<html>
  <head>
		<meta charset="utf-8">
		<title>D3.js Hello World</title>
		<script src="https://d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
		<p>first text</p>
		<p>second text</p>
		<p>third text</p>
		<script>
		var p = d3.select('body').selectAll('p')
		.attr('color', 'red')
		.attr('font-size', '72px')
		.text('brucewar');
		</script>
	</body>
</html>

上面代码展示了基本的DOM操作，有过jQuery开发经历的人会发现其语法和jQuery很相似，主要是以下两点：

支持元素选择器
链式语法结构

插入元素

// 末尾插入p元素
d3.select('body').append('p').text('append new prograph');
// 在第一个p元素之前插入p
d3.select('p').insert('p').text('insert new prograph');

删除元素

1	d3.select('p').remove();

数据绑定

在D3中，选择器通常和数据绑定一起使用，这里的数据绑定的意思是将DOM元素与数据进行绑定，当需要依靠数据操作元素会非常方便。

var arr = ['a', 'b', 'c'];
p.data(arr).text(function(d, i){
	// d: 数据 i: 元素索引
	return d;
});

绘制简单的横向柱状图

添加svg画布

var width = 300;
var height = 300;
var svg = d3.select('body')
.append('svg')
.attr('width'. width)
.attr('height', height);

绘制矩形

var data = [250, 210, 170, 130, 90]; // 表示矩形的宽度
var rectHeight = 25;
svg.selectAll('rect')
.data(data)
.enter()	// 当元素个数不足数据个数时，自动补全
.append('rect')
.attr('x', 20)
.attr('y', function(d, i){
	return i * rectHeight;
})
.attr('width', function(d){
	return d;
})
.attr('height', rectHeight - 2)
.attr('fill', 'steelblue');

从上面的代码可以看出当data中的数据大于画布的宽度时，绘制的矩形会超出画布，所以需要引入比例尺（Scale）的概念。比例尺的概念类似数学中的一元二次函数，有x和y两个未知数，当x的值确定时，y的值也就确定了，x范围被称为定义域，y的范围为值域，对应于D3比例尺中的domain和range。D3为我们提供了很多比例尺，这里主要讲这里柱状图所要使用的线性比例尺。

var min = d3.min(data);
var max = d3.max(data);
var linear = d3.scale.linear()
.domain([min, max])
.range([0, 300]);

绘制坐标轴

//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺
var linear = d3.scale.linear()
 .domain([0, d3.max(dataset)])
 .range([0, 250]);
var axisX = d3.svg.axis()
 .scale(linear)      //指定比例尺
 .orient("bottom")   //指定刻度的方向
 .ticks(7);          //指定刻度的数量

定义了坐标轴之后，只要在svg中添加一个分组元素，再将坐标轴的其他元素添加到分组即可。

svg.append('g')
.attr('class', 'axis')
.attr('transform', 'translate(20, 130)')
.call(axisX);

/** 修改坐标轴样式 */
.axis path,
.axis line{
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
}
.axis text{
	font-family: sans-serif;
	font-size: 11px;
}