Tell us what’s happening:
please help to add background hover effect for the bar
Your code so far
this.state.measure.map((value, index) => {
return (
g.selectAll(`.bar${index}`)
.data(this.state.data)
.enter().append("rect")
.attr("class", `.bar${index}`)
.attr()
.attr("x", 0)
.attr("y", function (d) {
return y(dataFormatDimension(d[keyforyaxis]))
})
.attr("width", function (d) {
let temp=x(d[value])
if(temp>previousTemp){
previousTemp=temp
highestValue=d[value]
}else{
previousTemp=previousTemp
highestValue=highestValue
}
return x(d[value]);
})
.attr("height", y.bandwidth())
.style("fill", `${this.state.colorCode[index]}`)
.style("opacity", function (d) {
if (d.opacity) {
return d.opacity
} else {
return "0.8"
}
})
.on("mousedown", function (d) {
onBarClick(d);
if(!isChartGeneratePage){
if(div!=null || div!=undefined){
var x = document.querySelectorAll("#tooltipd3");
var i;
for (i = 0; i < x.length; i++) {
x[i].remove();
}
}
}
})
.on("mouseover", function (d) {
if(div!=null || div!=undefined){
var x = document.querySelectorAll("#tooltipd3");
var i;
for (i = 0; i < x.length; i++) {
x[i].remove();
}
}
div = d3.select("body").append("div")
.attr("class", "tooltip")
.attr("id", "tooltipd3")
div.html(function () {
let dimensionLabel = d[`${keyforyaxis}`]
if(d[`${keyforyaxis}__label`]!=undefined){
dimensionLabel= d[`${keyforyaxis}__label`]
}else{
dimensionLabel= d[`${keyforyaxis}`]
}
let dimentionTool = "<p class='tooltipd3Title' style='opacity: 0.6;'>X-AXIS </p>" + "<p style='opacity: 0.8; margin-top: 15px; margin-bottom: 15px !important;display: inline-block;'>" + dimensionName[0] +"</p>"+"<p style='display:inline-block;'>"+ " : " + dimensionLabel + "</p>";
let measureTool = "<p class='tooltipd3Title' style='opacity: 0.6; margin-bottom:5px;'>Y-AXIS </p>";
if (meausureformap.length > 0) {
var tempLabel;
meausureformap.map((measureval, idx) => {
if(d[`${measureval}__label`]!=undefined){
tempLabel=d[`${measureval}__label`]
}else{
tempLabel=d[`${measureval}`]
}
measureTool = measureTool + "<span style='width: 10px; margin-top: 4px; height: 10px; margin-right:6px; display: inline-block; background-color: " + colorcodeTemp[idx] + "'>" + "</span>" + "<p style='opacity: 0.7;margin-top: 6px; margin-right:7px; display: inline-block; color:white;'>" + measureforTooltip[idx]+ "</p>" + "<p style='opacity: 1;margin-top: 6px; margin-right:7px; display: inline-block; color:white;'>" +" : " +tempLabel + "</p>" + "<br/>";
})
}
return dimentionTool + "<hr style='height: 0.3px; opacity: 0.7; margin: 0 0 10px 0; background: white;'>" + "</hr>" + measureTool;
}
)
.style("opacity", 1)
.style("background", "rgba( 6, 7, 45, 0.8)")
.style("width", "max-content")
.style("height", 'auto')
.style("color", "white")
.style("padding", "20px")
.style("fontFamily", "Roboto")
.style("textAlign", "left")
})
.on("mousemove", function (d) {
if(div!=null || div!=undefined){
var x = document.querySelectorAll("#tooltipd3");
var i;
if(x.length>1){
let temp=x.length-1;
for (i = 0; i < x.length; i++) {
if(i!=temp){
x[i].remove();
}
}
}
}
div.style("left", (d3.event.pageX) + "px")
.style("opacity", 1)
.style("top", (d3.event.pageY + 28) + "px");
})
.on("wheel",function(d){
if(div!=undefined || div!=null){
div.style("opacity", 0)
}
})
.on("mouseout", function (d) {
// div.style("left", "0px")
// .style("top", "0px")
// .style("height","-10000px")
// .style("width","-100000px")
// .style("padding","0px")
// .style("opacity", 0);
var x = document.querySelectorAll("#tooltipd3");
var i;
for (i = 0; i < x.length; i++) {
x[i].remove();
}
// div.remove();
})
)
})
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36.
Challenge: Add a Hover Effect to a D3 Element
Link to the challenge:
Welcome back to the freeCodeCamp forum—it’s been a while!