1. event listener: on ("event_name", behavior);
commonly, you will want to bind event listeners to more than one element at a time, such as to all of the visual elements in your visualization. Fortunately, that is very easy to do. In stead of using select() to selectone element, use selectAll() to select multiple elements and pass that to on( )
can bind event listeners right at the moment when you first create elements. For example
svg. select("rect").data(dataset).enter().append("rect")
.on("click",function(d){ // this will run whenever you click any bar
}
);
2. Hover to highlight
1) use css to hight
rect : hover { fill: orange;} // hover is a pseudoclass selector
or CSS smooth transition
rect {
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
} // this will apply a 0.3s transition to any change to the rect elements.
3. D3 event:
.on("mouseover",function(){ // do something;})
.on("mouseover",function(){
d3.select(this) // this will set the fill of the bar( the one on which the mouseover event is triggered) to orange.
.attr("fill",orange);
})
.on("mouseout",function(){
d3.select(this).attr("fill","rgb(0, 0, " + (d * 10) + ")");
});
this: 1) context is important
2) within anonymous functions, D3 automatically sets the context of this so it references "the current element upon which we are acting")
4. add transition to event
.on("click",function(){
d3.select(this).
.transition()
.duration(500)
.attr("fill","red");
})
5. pointer events on overlapping elements
pointer-events: none;
svg.append("text")
… //other stuff here
.style("pointer-events", "none"); // if your mouse on the text element, this will not trigger anything.
or use CSS
svg text {
pointer-events: none;
}
6. Grouping SVG elements
g group elements do not, by themselves trigger any mouse events. Because g elements have no pixels. Only their inside elements, like rect, circle have pixels
We can still bind event listeners to g elements. Just keep in mind that the elements within that g will then behave as a group. For example, if any of the enclosed elements are clicked or moused over, then the listener function will be activated.
This technique can be quite useful when you have several visual elements that should all act in concert. In our bar chart, for example, we could group rect and text elements
each into their own groups.
rect
text
g
rect
text
instead of worrying about pointer-events and which elements in on top, we just bind the event listener to the whole group. So clicking on some text, will trigger the same code as on the rect.
Click to sort event
on("click",function(){sortBars();})
var sortBars function () {
svg.selectAll("rect")
.sort(function(a,b) {
return d3.ascending(a,b); // unlike anonymous functions so far, the comparator doesn't take d (the current datum) or i(the current index).
Instead, we pass two values, a and b( these are arbitrary names), which represent the data values of different elements.
The comparator will be called on every pair of elements in our array
})
.transition()
.duration(500)
.attr("x",function(d,i) {
return xScale(i);}) // our new order in place, we initiate a transition, set a duration of 0.5s, and then calcuate the new x position for each rect.
};
d3.ascending(a,b)
d3.descending(a,b)
Tooltip
1) browser tip: the browser can handle it by add title to the element.
svg.selectAll("rect").data(dataset).enter().append("rect").....append("title).t
ext(function(d) {return "this value is"+d;})
2) SVG element tooptips
.on("mouseover", function(d) {
var xposition = d3.select(this).attr("x")+xScale.rangeBand()/2;
var yposititon = d3.select(this).attr("y")+d3.select(this).attr("height")/2;
//create the tooltip labe
svg.append("text").attr("id","tooltip")
.attr("text").attr("x",xposition).attr("y",yposition).attr("text-anchor",middle).attr("font-family",sans-serif).attr("font-size","11px")
.attr("fill","black").text(d)
}
.on("mouseout",function(){
d3.select("#tooltip").remove()
});
.on("click",function(){sortBars();});
3) HTML div tooltips
A. using HTML div when you want to achieve a visual effect that isn't possible or well-supported by SVG (such as CSS drop window)
B. you need the tooltips to extend beyond the frame of the SVG image
CSS<div id="tooltip" class="hidden">
<p><strong>Important Label Heading</strong></p>
<p><span id="value">100</span>%</p>
</div>
:#tooltip {
position: absolute; // so we can control exactly where it should appear on the page
width: 200px;
height: auto;
padding: 10px;
background-color: white;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
pointer-events: none; // ensures that mousing over the tooltip itself won't trigger a mouseout event on the bars, thereby hiding the tooltip.
}
#tooltip.hidden {
display: none;
}
#tooltip p {
margin: 0;
font-family: sans-serif;
font-size: 16px;
line-height: 20px;
}
Script: .on("mouseover",function(d){
var xPosition = d3.select(this).attr("x")+xScale(rangeBand()/2;
var yPosition = d3.select(this).attr("y")+yScale(d)/2;
d3.select("#tooltip")
.style("left",xPostion+"px")
.style("right",yPosition+"px")
.select("#value")
.text(d);
d3.select("#tooltip").classed("hidden",false);
})
.on("mouseout",function() {d3.select("#tooltip").classed("hidden",true);})