d3.js学习
直接使用：
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
d3使用hello world
<html>
<head>
<meta charset="utf-8">
<title>d3.js</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>
d3.select("body").selectAll("p").text("www.ourd3js.com");
var dataset = ["I like dog","I like cat","I like snake"];
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d, i){
return d;
});
</script>
</body>
</html>
使用 d3.select() 或 d3.selectAll() 选择元素后返回的对象，就是选择集。
-
操作元素api：
- selection.append(type) 创建新元素并返回该元素
- selection.remove() 从DOM中移除当前元素
- selection.attr(name[,value]) 取得或设置属性的值
-
selection.style(name[,value[,priority]]) 取得或设置元素的样式
d3可以不断调用函数 即链式语法
绑定数据：
-
D3 中是通过以下两个函数来绑定数据的：
- datum()：绑定一个数据到选择集上；为每个元素绑定值value
-
data()：绑定一个数组到选择集上，数组的各项值分别与选择集的各元素绑定；为每个元素分别绑定对应data中数据值
data方法与datum方法的区别在于，data的参数是数组，分别分配给对应的DOM元素，每个DOM元素得到一个value值，而datum把相同参数均赋值给DOM元素，每个元素得到的数据值相同。
简单的图表例子：
var width = 300; //画布的宽度
var height = 300; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
// svg.append("rect");
var dataset1 = [ 2.5 , 1.3 , 0.9, 2.1 , 1.7 ]; //数据（表示矩形的宽度）
var linear = d3.scale.linear().domain([0, d3.max(dataset1)]).range([0,250])
var rectHeight = 25;
svg.selectAll("rect").data(dataset1).enter().append('rect')
.attr('x',20).attr('y',function(d,i){
return i * rectHeight
})
.attr('width',function(d){
return linear(d); //在这里用比例尺
})
.attr('height',rectHeight-2).attr('fill','blue');
比例尺：将某一区域的值映射到另一区域，其大小关系不变。
定义域 domain 值域 range 通过指定范围可得到一个计算关系
// 将 dataset 中最小的值，映射成 0；将最大的值，映射成 300
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
d3.scale.linear() 返回一个线性比例尺。domain() 和 range() 分别设定比例尺的定义域和值域。
d3.max()取数组最大值 d3.min()取数组最小值
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
d3.scale.ordinal() 返回一个序数比例尺
坐标轴：d3.svg.axis()
//数据
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 axis = d3.svg.axis()
.scale(linear) //指定比例尺
.orient("bottom") //指定刻度的方向
.ticks(7); //指定刻度的数量
svg.append("g") //添加到svg
.call(axis);
完整的柱形图：
var dataset1 = [ 2.5 , 1.3 , 0.9, 2.1 , 1.7 ]; //数据（表示矩形的宽度）
var rectHeight = 25;
var xScale = d3.scale.linear().domain([0, d3.max(dataset1)]).range([0,250]);
var yScale = d3.scale.ordinal().domain(d3.range(dataset1.length)).rangeRoundBands([0, rectHeight * dataset1.length]);
//添加矩形元素
svg.selectAll("rect").data(dataset1).enter().append('rect')
.attr('x',20).attr('y',function(d,i){
return i * rectHeight
})
.attr('width',function(d){
return xScale(d)
})
.attr('height',rectHeight-2).attr('fill','blue')
.on('mouseover',function(d,i){
d3.select(this).attr('fill','yellow');
})
.on('mouseout',function(d,i) {
d3.select(this).transition().duration(500).attr('fill','blue')
});
//添加文字元素
var texts = svg.selectAll('text').data(dataset1).enter().append('text')
.attr('transform','translate(5,10)')
.attr('x', function(d,i){
return xScale(d) - 15
})
.attr('y', function(d,i){
return i * rectHeight + (rectHeight-10)/2
})
.text(function(d){
return d;
}).attr('fill','white');
var Xaxis = d3.svg.axis()
.scale(xScale) //指定比例尺
.orient("bottom") //指定刻度的方向
.ticks(7); //指定刻度的数量
var Yaxis = d3.svg.axis()
.scale(yScale)
.orient("left");
//添加x轴
svg.append("g") //添加到svg
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(Xaxis);
//添加y轴
svg.append("g") //添加到svg
.attr("class","axis")
.attr("transform","translate(20,0)")
.call(Yaxis);
-
动态效果： 从状态 A 变为状态 B
-
transition()
启动过渡效果。
duration()
指定过渡的持续时间，单位为毫秒。
ease()
指定过渡的方式，常用的有：
linear：普通的线性变化
circle：慢慢地到达变换的最终状态
elastic：带有弹跳的到达最终状态
bounce：在最终状态处弹跳几次
调用时，格式形如： ease(“bounce”)。
delay()
指定延迟的时间，表示一定时间后才开始转变，单位同样为毫秒。此函数可以对整体指定延迟，也可以对个别指定延迟。
// 为柱状图的文字元素实现动态效果
texts.attr("x",function(d){
var min = xScale.domain()[0];
return xScale(min);
}).transition().delay(function(d,i){
return i * 200
}).duration(2000).ease('bounce')
.attr('x', function(d,i){
return xScale(d) - 15
})
-
理解update enter exit
-
update 部分的处理办法一般是：更新属性值
enter 部分的处理办法一般是：添加元素后，赋予属性值
exit 部分的处理办法一般是：删除元素（remove）
交互操作
用户用于交互的工具一般有三种：鼠标、键盘、触屏。
var circle = svg.append("circle");
circle.on("click", function(){
//在这里添加交互内容
console.log(d3.event); //当某个事件被监听到时，D3 会把当前的事件存到 d3.event 对象，里面保存了当前事件的各种参数
});
在 D3 中，每一个选择集都有 on() 函数，用于添加事件监听器。
on() 的第一个参数是监听的事件，第二个参数是监听到事件后响应的内容，第二个参数是一个函数。
-
鼠标常用的事件有
-
click：鼠标单击某元素时，相当于 mousedown 和 mouseup 组合在一起。
mouseover：光标放在某元素上。
mouseout：光标从某元素上移出来时。
mousemove：鼠标被移动的时候。
mousedown：鼠标按钮被按下。
mouseup：鼠标按钮被松开。
dblclick：鼠标双击。
键盘常用的事件有三个：
keydown：当用户按下任意键时触发，按住不放会重复触发此事件。该事件不会区分字母的大小写，例如“A”和“a”被视为一致。
keypress：当用户按下字符键（大小写字母、数字、加号、等号、回车等）时触发，按住不放会重复触发此事件。该事件区分字母的大小写。
keyup：当用户释放键时触发，不区分字母的大小写。 触屏常用的事件有三个：
触屏：
touchstart：当触摸点被放在触摸屏上时。
touchmove：当触摸点在触摸屏上移动时。
touchend：当触摸点从触摸屏上拿开时。 布局 可以理解为 数据转换
-
D3 总共提供了 12 个布局：
饼状图（Pie）、
力导向图（Force）、
弦图（Chord）、
树状图（Tree）、
集群图（Cluster）、
捆图（Bundle）、
打包图（Pack）、
直方图（Histogram）、
分区图（Partition）、
堆栈图（Stack）、
矩阵树图（Treemap）、
层级图（Hierarchy）。
饼图demo：
// 饼图
var svg1 = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
var dataset2 = [ 30 , 10 , 43 , 55 , 13 ];
var pie = d3.layout.pie();
var piedata = pie(dataset2)
var color = d3.scale.category10(); //有十种颜色的颜色比例尺
var outerRadius = 150;
var innerRadius = 0;
var arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius);
var arcs = svg1.selectAll('g').data(piedata).enter().append('g')
.attr('transform','translate('+ (width/2) + ','+ (width/2) +')');
arcs.append('path').attr('fill',function(d,i){
return color(i);
}).attr('d',function(d){
return arc(d)
})
arcs.append('text').attr('transform',function(d) {
return 'translate('+ arc.centroid(d) +')'
}).attr('text-anchor', 'middle')
.text(function(d){
return d.data;
})
五年web前端经验
H5静态页面 需要交互 联调接口的项目 bug解决
有需求可以私信我