d3.js学习笔记-07(交互)

d3.js学习笔记-07

1 交互基础

与图表进行交互，图形元素上设置一个或者多个监听器，当事件发生时，做出相应的反应。

1.1 鼠标的事件

• click：鼠标单击某元素。
• mouseover：光标放在某元素上。
• mouseout：光标从某元素上移出来时。
• mousemove：鼠标被移动的时候。
• mousedown：鼠标按钮被按下。
• mouseup：鼠标按钮被松开。
• dblclick：鼠标双击。

var rect =svg.selectAll(" rect")
			//绑定数据
			.data(dataset)
			//获取enter部分
			.enter()
			.append("rect")//添加rect元素，使其与绑定数组的长度一致
			.attr("fi11"，"steelblue") //设置颤色为steelblue
			//设置矩形的x坐标
			.attr("x",function(d,i，i
				return padding.left + xScale(i);
			})
			.attr("y",function (d){//设置矩形的y坐标
				return height- padding.bottom - yscale(d);
			})
			.attr("width",xScale.rangeBand()) //设置矩形的宽度
			.attr("height".function(d){
				//设置矩形的高度
				return yscale(d);
			})
			.on("mouseover" ,function(d,i){
				d3.select(this).attr("fi11","yellow"); //当鼠标移到元素上时，元素为黄色						
			})
			.on("mouseout",function (d,i){
				d3.select(this)//当鼠标移到元素上时，元素过渡到原来的颜色
					.transition()
					.duration(500)
					.attr("fill","steelblue");
			});

1.2 键盘的事件

• keydown：当用户按下任意键时触发，按住不放会重复触发此事件。该事件不区分字母的大小写。
• keypress：当用户按下字符键（大小写字母、数字、加号、等号、回车等）时触发，按住不放会重复触发此事件。该事件区分字母的大小写。
• keyup：当用户释放键时触发，不区分字母的大小写。
  example：键盘的监听事件添加到body中

d3.select("body")
	.on("keydown",function()
	//keydown事件的监听器
	rects.attr("fi1l",function (d){
		if(d == String.fromCharCode(d3.event.keyCode)){
			//如果所按下的键与此rect元素上绑定的数据相同，则返回黄色
			return "yellow":
		}else{
			//否则返回黑色
			return "black";
		}
	});
	.on ("keyup" , funetion({
	//keyup事件的监听器
		rects.attr("fi11","black")；
	});

1.3 触屏

• touchstart：触摸点被放在触摸屏上时。
• touchmove：触摸点在触摸屏上移动时。
• touchend：触摸点从触摸屏上拿开时。

var circle = svg.append ("circle")
	.attr("cx", 150)
	.attr("y", 200)
	.attr("r", 50)
	.attr("fi11", "blue")
	//touchstart事件的监听器
	.on("touchstart", function(){
		d3.select (this).attr("fi11","yellow"); // 开始触摸时，圆变为黄色
	})
	//touchmove事件的监听器
	.on("touchmove", function(){
		var pos = d3.touches(this)[O];  //获取第一个触摸点
		d3.select(this).attr("cx",pos[0]) // 更改圆心坐标实现拖动
						.attr("cy",pos[1]);  
	))
	//touchend事件的监听器
	.on("touchend", function(){
		d3.select(this).attr("fill","blue");  // 触摸结束时颜色变为蓝色
	});

2 事件

任何事件发生时，都会存储在d3.event中。

3 行为

3.1 拖拽

使用鼠标/触屏将元素从一个位置移到另一个位置

• d3.behavior.drag()：创建一个拖曳行为。
• drag.on(type[.listener])：设定事件的监听器。type是事件类型：dragstart、drag、dragend。它们分别表示拖曳开始时、拖曳中、拖曳结束时。listener是监听器的函数，如果省略该参数，则返回当前指定事件的监听器。
• drag.origin([origin])：设定拖曳的起点。此函数可使鼠标与被平移元素以相对不变的偏移量移动。如果设定了起点，此函数会在mousedown事件发生时被调用，d3.event的初始坐标就是此起点坐标。该函数的返回值是一个对象，对象里包含x和y属性。

svg.selectAll("cirele"y
	.data(cireles)  // 绑定数据
	.enter()
	.append("circle")
	.attr("cx",function(d){ return d.cx;})
	.attr("cy", function(d){ return d.ey;})
	.attr("r".function(d){return d.r;})
	.attr("fi11", "b1ack" )
	.call(drag);  //调用drag函数,drag为参数
	
//创建一个拖曳行为
var drag = d3.behavior.drag()
			.origin(function(d,i){  //设置起点坐标
				return {x:d.cx, y:d.cy} //起点坐标为被拖动物体的圆心坐标
			})
			.on("dragstart", function(a){ //dragstart的监听器
				console.log("拖曳开始");
			})
			.on("dragend", function(d){  //dragend的监听器
				console.log("搁曳结束");
			})
			.on("drag", function(d){
				d3.select(this)//选择当前被拖曳的元素
				// 将d3.event.x赋值给被绑定的数据，再将cx属性设置为该值
				.attr("cx", d.cx = d3.event.x )
				//将d3.event.y赋值给被绑定的数据，再将cy属性设置为该值
				.attr("cy". d.cy -d3.event.y );
			});

3.2 缩放

• d3.behavior.zoom()：创建一个缩放行为。
• zoom(selection)：应用此行为到选择集selection。
• zoom.translate([translate])：设定当前的缩放平移向量，默认为[0,0]。如果省略，则返回当前的平移向量。
• zoom.scale([scale])：设定初始缩放量，默认为1。如果省略，则返回当前的缩放量。
• zoom.scaleExtent([extent])：设定放大（缩小）的最小值和最大值，默认为[0，无穷大]。
• zoom.center([center])：设定缩放的中心，默认为鼠标当前位置。
• zoom.x([x])：设定一个x方向的比例尺，该比例尺会随着放大缩小自动改变其定义域。
• zoom.y([y])：设定一个y方向的比例尺，该比例尺会随着放大缩小自动改变其定义域。
• zoom.on(type,listener)：设置事件类型和监听器。事件类型有三种:zoomstart、zoom、zoomend，分别表示缩放开始时、缩放中、缩放结束时。

var g=svg.append("g")
	.call(zoom);   // 为元素g添加缩放行为， 而不是添加在特定的圆上
g.selectAll("circle")
	.data(circles)
	.enter()
	.append("circle")
	.attr("cx", function(d){ return d.cx;})
	.attr("cy", function(d){ return d.cy;})
	.attr("r",function(d){ return d.r; })
	.attr("fi11", "black");

var zoom = d3.behavior.zoom()   //创建一个缩放行为
			.scaleExtent(1, 10)   //设置缩放的范围
			.on("zoom", function(d){
				d3.select(this).attr("transform", "translate(" +d3.event.translate + ")" + "scale(" +d3 .event.scale +")") // transition(x, y)平移; scale(s)缩放
			});

References

[1] 吕之华.精通D3.js：交互式数据可视化高级编程[M].北京：电子工业出版社,2015∶174-190.