1.安装
- <script src="http://d3js.org/d3.v3.min.js&...; charset="utf-8"></script>
2.介绍
- d3.select()和d3.selectAll();
<body>
<p>1</p>
<p>2</p>
<p>3</p>
</body>
<script>
p=d3.select("body").selectAll("p").text("aaaa"); // 可以取到页面上所有的p元素
</script>
以上就是D3的选择集。
- 以上选择了数据,如何绑定数据
提供2个方法:datum()和data().
datum():是指绑定一个数据到选择集上。
data():绑定一个数组到选择集上,并且数组的各项值与选择集的各项绑定。
- 元素的选择还可以通过id 和class去查找
<p class="myclass">Pear</p>
<p class="myclass">Banana</p>
var p = body.selectAll(".myclass");
p.style("color","red");
- 元素的插入
append() insert()
body.append("p")
.text("append p element");
- 删除元素
var p = body.select("#myid");
p.remove();
3.画图表的要素
画图表之前都有一个前置工作要做,就是所有的东西都是画在svg上的。
var width = 300; //画布的宽度
var height = 300; //画布的高度
var svg = d3.select("body") //选择文档中的body元素
.append("svg") //添加一个svg元素
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
- 比例尺(scale)
比例尺分为2种,一种是线性比例尺,一种是序数比例尺
先看线性比例尺代码
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.min(数组名称) d3.max(数组名称) 分别是获得数组的最小值和最大值。
看序数比例尺的代码
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
序数比例尺提供的是ordinal方法。d3.scale.ordinal() ;
那么定义完比例尺了,怎么去应用呢?
svg.selectAll("rect")
.data(dataset)
.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","steelblue");
- 坐标轴 axis
d3.svg.axis() 定义了一个坐标轴
scale():指定比例尺
orient():指定刻度的朝向
- ticks():指定的刻度的数量
//数据
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")
.call(axis);
4 图表的动画
transition() // 启动动画
duration(2000) //动画的持续时间
ease(bounce) // 动画类型 常用的有linear circle elastic bounce
5.图表的交互
circle.on("click", function(){
//在这里添加交互内容
});
一般用on加事件处理程序
鼠标常用的事件有:
click:鼠标单击某元素时,相当于 mousedown 和 mouseup 组合在一起。
mouseover:光标放在某元素上。
mouseout:光标从某元素上移出来时。
mousemove:鼠标被移动的时候。
mousedown:鼠标按钮被按下。
mouseup:鼠标按钮被松开。
dblclick:鼠标双击。
键盘常用的事件有三个:
keydown:当用户按下任意键时触发,按住不放会重复触发此事件。该事件不会区分字母的大小写,例如“A”和“a”被视为一致。
keypress:当用户按下字符键(大小写字母、数字、加号、等号、回车等)时触发,按住不放会重复触发此事件。该事件区分字母的大小写。
keyup:当用户释放键时触发,不区分字母的大小写。 触屏常用的事件有三个:
touchstart:当触摸点被放在触摸屏上时。
touchmove:当触摸点在触摸屏上移动时。
touchend:当触摸点从触摸屏上拿开时。 当某个事件被监听到时,D3 会把当前的事件存到 d3.event 对象,里面保存了当前事件的各种参数,请大家好好参详。如果需要监听到事件后立刻输出该事件,可以添加一行代码:
6. 图表的布局
布局是帮你完成了数据转换,不是帮你完成了画图
D3 总共提供了 12 个布局:饼状图(Pie)、力导向图(Force)、弦图(Chord)、树状图(Tree)、集群图(Cluster)、捆图(Bundle)、打包图(Pack)、直方图(Histogram)、分区图(Partition)、堆栈图(Stack)、矩阵树图(Treemap)、层级图(Hierarchy)。
12 个布局中,层级图(Hierarchy)不能直接使用。集群图、打包图、分区图、树状图、矩阵树图是由层级图扩展来的。如此一来,能够使用的布局是 11 个(有 5 个是由层级图扩展而来)。这些布局的作用都是将某种数据转换成另一种数据,而转换后的数据是利于可视化的。
具体看官网
7.理解update。enter exit
如果数组为 [3, 6, 9, 12, 15],将此数组绑定到三个 p 元素的选择集上。可以想象,会有两个数据没有元素与之对应,这时候 D3 会建立两个空的元素与数据对应,这一部分就称为 Enter。而有元素与数据对应的部分称为 Update。如果数组为 [3],则会有两个元素没有数据绑定,那么没有数据绑定的部分被称为 Exit
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。