【D3使用教程】(6) 交互操作之事件监听

事件监听

在之前的文章中写到，为了让图表具有交互能力，我们必须针对一些事件来编写代码，以便监听某些DOM元素发生的这些事件。

D3中,on()方法对于绑定D3元素集非常方便。

通常情况下，我们会一次性为多个元素绑定事件监听器，所要改变的只是将select()换成选择多个元素的selectAll()，再把选择的元素集交给on()即可。

这里我们以柱状图为例，

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr({
		x:function(d,i){return i* (w/dataset.length);},
		y:function(d){return h-(d*4);},
		    width: w/dataset.length - barPadding,
		    height: function(d){return d*4;},
		    fill: function(d){return "rgb(0,0,"+(d*10)+")";}
	})
    .on("click",function(d){
       //任何条形被单击，都会执行该代码
        	console.log(d);//点击条形，在控制台查看输出
    });

悬停高亮

简单的悬停高亮使用CSS3就能实现，例如在条形图上悬停高亮：

rect {
	-moz-transition: all .3s;
	 -o-transition:all .3s;
	 -webkit-transition: all .3s;
	 transition: all .3s;
}
rect:hover {
	 fill:orange;
}

但是，既然D3中也能这么做，即绑定mouseover和mouseout事件。你还可以根据上节学到加入过渡效果。

.on("mouseover",function(d){
     d3.select(this) //在传给任何D3方法的匿名函数中，如果想操作当前元素，只要引用this就行
       .transition(300)
       .attr("fill","orange");
   })
       .on("mouseout",function(d){
          d3.select(this)
           	.transition(300)
           	.attr("fill","rgb(0,0,"+(d*10)+")");
  }

但是，你是否注意到，但你将鼠标移到标签上时，不会发生高亮效果。就是说，标签"挡住"了mouseover这个事件的发生。为了不被标签影响，可以给标签(svg text元素)添加规则:

svg text　｛pointer-event:none;｝

或者在D3创建标签的时候设置CSS属性：

svg.selectAll("text")
   .data(dataset)
   .enter()
   .append('text')
   .style("pointer-events","none")  //<---添加的属性
   .text(function(d){
      return d;
  })
   .attr({
      x:function(d,i) {
          return i * (w/dataset.length)+40;
   },
      y:function(d){return h-(d*4)+14;},
         fill:"red",
 });

#排序

仍以条形图为例，给每个条形添加一个click事件监听器，在这个匿名函数中调用我们新定义的一个函数sortBars()，然后利用D3提供的sort()函数进行排序。
这里需要注意的是，单击条形图时，会触发一次过渡，而鼠标悬停又会触发另一次过渡。为了运行鼠标悬停的高亮过渡，原来正在运行的过渡就会中断。所以，为了避免中断，这里的悬停我们使用了CSS3的方式。

var sortBars = function() {
    sortOrder = !sortOrder;
    // 选择所有rect元素，使用D3提供的sort()方法，排序依据是绑定到它们的数据值
      svg.selectAll("rect")
        .sort(function(a,b){
        	 if(sortOrder){
        	   	return d3.ascending(a,b);//比较函数接受来自两个不同元素的数据值，针对数组中每一对元素都被调用一次，然后它比较a和b，知道所有数组元素都按我们指定的规则排序完毕
        	 }else {
        	   	 return d3.descending(a,b);//降序
        	 } 		
      })
        .transition()
        .duration(1000)
        .delay(function(d,i){return i*10;})
        .attr({
		x:function(d,i){return i* (w/dataset.length);},
		y:function(d){return h-(d*4);}
	});
        svg.selectAll("text")
           .sort(function(a,b){
        	 if(sortOrder){
        	   	return d3.ascending(a,b);
        	}else {
        	   return d3.descending(a,b);
        	}
        })
        .transition()
        .duration(1000)
        .delay(function(d,i){return i*10;})
		.attr({
		    x:function(d,i) {
		         return i * (w/dataset.length)+40;
		},
		    y:function(d){return h-(d*4)+14;},
		         fill:"red",
		});
        	   
  };

#提示条
1】 添加title
.append(“title”)
.text(function(d){return d;}) //在添加rect或者其他图形时候添加title，当鼠标悬停在图形上方，自然会有浏览器自带的提示
2】 SVG提示条
利用mouseover()事件监听，动态创建值标签，而在mouseout发生时，将值标签删除。不大推荐该方式。
3】HTML的DIV提示条
类似于SVG，只是它能做的更美观
例如，我们再页面中初始化一个html提示条
:

<div id="tooltip" class="hidden">
	<p><strong>This Value is:</strong></p>
	<p><span id="tooltip_value">100</span></p>
</div>

然后利用d3的mouseover与mouseout对id="tooltip"进行控制。

附完整代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
        div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;
            margin-right: 2px;
            background-color: teal;

        }
        rect {
		  -moz-transition: all .3s;
		  -o-transition:all .3s;
		  -webkit-transition: all .3s;
		  transition: all .3s;
		}
		rect:hover {
		  fill:orange;

		}
		#tooltip {
			position:absolute;
			width: 150px;
			height: auto;
			padding:5px;
			background-color: white;
			border:1px solid #ccc;
			-webkit-border-radius:10px;
			-moz-border-radius:10px;
			border-radius: 10px;font-style: 
			-webkit-box-shadow:4px 4px 10px rbga(0,0,0,0.4);
			-moz-box-shadow:4px 4px 10px rbga(0,0,0,0.4);
			box-shadow:4px 4px 10px rbga(0,0,0,0.4);
			pointer-events: none;
		}
		#tooltip.hidden{display: none;}
		#tooltip p {
			margin:0;
			font-family: sans-serif;
			font-size: 16px;
			line-height: 20px;
		}
    </style>

</head>
<body>
	<div id="tooltip" class="hidden">
		<p><strong>This Value is:</strong></p>
		<p><span id="tooltip_value">100</span></p>
	</div>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.js"></script>
    <script src="https://d3js.org/d3.v3.js"></script>
	<script type="text/javascript">
		let w = 500;
       let h = 100;
       let padding = 30;
       let barPadding =10;
       let sortOrder = false;
       let svg = d3.select("body").append("svg").attr("width",w).attr("height",h);//把append()返回的新元素保存在了变量svg中
       let dataset = [5,10,6,3,25];
       svg.selectAll("rect")
           .data(dataset)
           .enter()
           .append("rect")
           .attr({
		    x:function(d,i){return i* (w/dataset.length);},
		    y:function(d){return h-(d*4);},
		    width: w/dataset.length - barPadding,
		    height: function(d){return d*4;},
		    fill: function(d){return "rgb(0,0,"+(d*10)+")";}
			})
            .on("mouseover",function(d){
            	//设置提示条的x,y坐标
            	let xPosition = parseFloat(d3.select(this).attr("x"));
            	let yPosition = parseFloat(d3.select(this).attr("y"));
            	//更新提示条位置和值
            	d3.select("#tooltip")
            	  .style("left",xPosition+"px")
            	  .style("top",yPosition+"px")
            	  .select("#tooltip_value")
            	  .text(d);
            	  //显示提示条
            	d3.select("#tooltip").classed("hidden",false);

            })
            .on("mouseout",function(){
            	//隐藏提示条
            	d3.select("#tooltip").classed("hidden",true);
            })
            .on("click",function(){
           	   sortBars();//调用排序
           });
       svg.selectAll("text")
        .data(dataset)
        .enter()
        .append('text')
        .style("pointer-events","none")
        .text(function(d){
            return d;
        })
        .attr({
            x:function(d,i) {
                return i * (w/dataset.length)+40;
            },
            y:function(d){return h-(d*4)+14;},
            fill:"red",
        });
        var sortBars = function() {
        	sortOrder = !sortOrder;
        	// 选择所有rect元素，使用D3提供的sort()方法，排序依据是绑定到它们的数据值
        	svg.selectAll("rect")
        	   .sort(function(a,b){
        	   	    if(sortOrder){
        	   			return d3.ascending(a,b);//比较函数接受来自两个不同元素的数据值，针对数组中每一对元素都被调用一次，然后它比较a和b，知道所有数组元素都按我们指定的规则排序完毕
        	   	    }else {
        	   	    	return d3.descending(a,b);//降序
        	   	    }
        	   		
        	   })
        	   .transition()
        	   .duration(1000)
        	   .delay(function(d,i){return i*10;})
        	   .attr({
			    x:function(d,i){return i* (w/dataset.length);},
			    y:function(d){return h-(d*4);}
			   });
        	svg.selectAll("text")
        	   .sort(function(a,b){
        	   		if(sortOrder){
        	   			return d3.ascending(a,b);
        	   	    }else {
        	   	    	return d3.descending(a,b);
        	   	    }
        	   })
        	   .transition()
        	   .duration(1000)
        	   .delay(function(d,i){return i*10;})
		       .attr({
		            x:function(d,i) {
		                return i * (w/dataset.length)+40;
		            },
		            y:function(d){return h-(d*4)+14;},
		            fill:"red",
		       });
        	   
        };
	</script>
</body>
</html>