72 lines
1.7 KiB
JavaScript
72 lines
1.7 KiB
JavaScript
class Tooltip {
|
|
|
|
constructor() {
|
|
//----------------------------------------
|
|
// tooltip
|
|
//----------------------------------------
|
|
this.tooltip = d3.select("body")
|
|
.append("div")
|
|
.style("position", "absolute")
|
|
.style("z-index", "10")
|
|
.style("visibility", "hidden")
|
|
.style("background", "#FFFFFF")
|
|
.attr('id', 'tooltip')
|
|
.classed('tooltipDiv', true)
|
|
;
|
|
};
|
|
|
|
chooseClass (party) {
|
|
if (party == "R"){
|
|
return "republican";
|
|
}
|
|
else if (party== "D"){
|
|
return "democrat";
|
|
}
|
|
else if (party == "I"){
|
|
return "independent";
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Gets the HTML content for a tool tip.
|
|
*/
|
|
tooltip_html(d) {
|
|
let text = "<h2 class =" + this.chooseClass(d.State_Winner) +
|
|
" >" + d.State + "</h2>";
|
|
text += "Electoral Votes: " + d.Total_EV;
|
|
text += "<ul>"
|
|
// Democrat
|
|
text += "<li class = democrat>" +
|
|
d.D_Nominee_prop+":\t\t"+d.D_Votes+"("+d.D_Percentage+"%)" + "</li>"
|
|
// Republican
|
|
text += "<li class = republican>" +
|
|
d.R_Nominee_prop+":\t\t"+d.R_Votes+"("+d.R_Percentage+"%)" + "</li>"
|
|
// Independent
|
|
if (d.I_Percentage) {
|
|
text += "<li class = independent>" +
|
|
d.I_Nominee_prop+":\t\t"+d.I_Votes+"("+d.I_Percentage+"%)" + "</li>"
|
|
}
|
|
text += "</ul>";
|
|
|
|
return text;
|
|
}
|
|
|
|
mouseover(d) {
|
|
this.tooltip
|
|
.html(this.tooltip_html(d))
|
|
.classed('tooltip-title', true)
|
|
;
|
|
this.tooltip.style("visibility", "visible");
|
|
}
|
|
|
|
mousemove(d) {
|
|
this.tooltip.style("top", (d3.event.pageY-10)+"px")
|
|
.style("left",(d3.event.pageX+10)+"px");
|
|
}
|
|
|
|
mouseout(d) {
|
|
this.tooltip.style("visibility", "hidden");
|
|
}
|
|
|
|
};
|