devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：AllinToyou | 2024-02-23 01:19:11

赞

踩

d3 事件

在这里插入图片描述

事件监听

在之前的文章中写到，为了让图表具有交互能力，我们必须针对一些事件来编写代码，以便监听某些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);//点击条形，在控制台查看输出
    });

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

悬停高亮

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

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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

但是，既然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)+")");
  }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

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

svg text　｛pointer-event:none;｝

  • 1

或者在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",
 });

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

#排序

仍以条形图为例，给每个条形添加一个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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38

#提示条
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>

  • 1
  • 2
  • 3
  • 4

然后利用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>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/132644
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号