D3.js学习资源:
http://wiki.jikexueyuan.com/project/d3wiki/introduction.html 极客学院关于D3.js的系列文章;
http://www.ourd3js.com/wordpress/
D3 3.x版本API:https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md
D3 4.x版本API:https://github.com/d3/d3/blob/master/API.md
3.x和4.x版本差别很大;
网上个人关于D3的博客:http://www.iampua.com/pui/ant-admin.html#/(示例)
https://www.cnblogs.com/fastmover/p/7779660.html 有例子可供下载
一、基本介绍
D3.js是基于数据驱动的java script数据可视化工具,借助 Html5提供的SVG、Canvas实现数据展示;
D3.js采用类似于JQuery的链式语法,选择和操纵数据都非常的方便,示例如下:
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World 1</p>
<p>Hello World 2</p>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var p=d3.select("body").selectAll("p");
p.text("www.ourd3js.com");
p.style("color","red");
p.style("font-size","72px");
//=======等价于如下链式语法:=======================================
//d3.select("body").selectAll("p").text("www.ourd3js.com").style("color","red").style("font-size","72px");
</script>
</body>
</html>
二、D3.js的元素选择
1、D3.js选择器允许选择元素、元素样式、设置元素属性
1)选择元素
d3.selectAll("p") //按元素名称选择全部元素
d3.select("body")//按元素名称选择指定元素
d3.select(".class")//选择指定的类
d3.select("#id") //按id选择元素
d3.select("body").select("p") //选择body中第一个P元素
三、数据绑定
d3中可以绑定到单个数据对象,也可以绑定到数组对象
实现页面中所有段落绑定到特定的字符串代码如下:
var str = "China";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str); //datum 绑定html元素到一个数据对象,注意绑定到内容不代表P的文本显示绑定数据
p.text(function(d, i){
return "第 "+ i + " 个元素绑定的数据是 " + d;
}); //通过函数设置P内容,内容返回 P的序列号及绑定内容信息
绑定到数组示例代码如下:
var dataset = ["I like dogs","I like cats","I like snakes"]
var body = d3.select("body");
var p = body.selectAll("p");
//===============通过函数data绑定到数组==================
p.data(dataset)
.text(function(d, i){
return d;
});;
四、元素插入、删除以及样式与属性设置
var width = 300; //画布的宽度
var height = 300; //画布的高度
svg = d3.select("body").append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9,3,5.5];
svg.selectAll("rect")
.data(dataset)
.enter() //====如果数据没有绑定到元素则创建占位元素,当append时创建实际元素
.append("rect")
.attr("x", 200)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return linear(d);
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue"); //设置属性,属性与svg对应
五、比例尺
比例尺建立实际数据与图像绘制数据之间的比例关系,d3提供了多种比例尺类型:线性比例尺(将一个连续的区间,映射到另一区间)、序数比例尺(值离散的,线性比例尺不适合,需要用到序数比例尺)
线性比例尺示例:
var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];
var min = d3.min(dataset);
var max = d3.max(dataset);
var linear = d3.scale.linear()
.domain([min, max])
.range([0, 300]);
linear(0.9); //返回 0
linear(2.3); //返回 175
linear(3.3); //返回 300
序数比例尺
var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];
var ordinal = d3.scale.ordinal()
.domain(index)
.range(color);
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black
线性比例尺应用示例:
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9,3,5.5];
var linear = d3.scale.linear() //==========线性比例尺============
.domain([0, d3.max(dataset)]) //==============实际数据================
.range([0, 350]); //===============绘图数据(根据实际数据与比例尺范围,自动创建绘图数据)====================
svg = d3.select("body").append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 200)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return linear(d); //返回比例尺中的数据
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue");
六、坐标轴
在绘制柱状图、曲线图时常常需要绘制坐标轴,在D3中已经将坐标轴实现为组件,柱状图实现示例:
d3.drawAxis = function ()
{
var width = 300; //画布的宽度
var height = 300; //画布的高度
svg = d3.select("body").select("svg");
//选择文档中的body元素
if (svg == undefined)
{
svg = d3.select("body").append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
}
var dataset = [2.5, 2.1, 1.7, 1.3, 0.9,3,5.5];
//==================定义比例尺=======================
var linear = d3.scale.linear()
.domain([0, d3.max(dataset)])
.range([0, 350]);
var rectHeight = 25; //每个矩形所占的像素高度(包括空白)
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", 200)
.attr("y", function (d, i) {
return i * rectHeight;
})
.attr("width", function (d) {
return linear(d); //=============获取比例尺数据================
})
.attr("height", rectHeight - 2)
.attr("fill", "steelblue");
//===============创建坐标轴组件,设置组件的相关属性========================
var axis = d3.svg.axis()
.scale(linear) //指定比例尺
.orient("bottom") //指定刻度的方向
.ticks(8); //指定刻度的数量
//==================call的作用是:在调用函数axis时,将添加的svg 组对象属性
//svg.append("g").attr("class", "axis").attr("transform", "translate(200,200)")作为axis函数的调用参数=================
//attr("transform", "translate(200,200)")表示平行移动坐标轴的位置x、y分量;
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(200,180)")
.call(axis);
}
绘制完成的图如下示意: