事件监听
在之前的文章中写到，为了让图表具有交互能力，我们必须针对一些事件来编写代码，以便监听某些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>
