Help to add background hover effect for the bars

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:

Hi @bashwin60 :wave: Welcome back to the freeCodeCamp forum—it’s been a while!

Looking at the supplied code, it seems you are over thinking this a bit, but don’t worry it’s okay you’ll get this!

I suggest that you reset the code and review the lesson text again. Take note of the CSS provided for you in the initial skeleton code. Your goal in this lesson should just be using the attr method to add that CSS class.

You shouldn’t need any of the stuff you’re trying to do with mouse events. If you don’t have a handle on CSS you may want to review some of the lessons in the Responsive Web Design section to understand how the CSS is achieving the color change on mouse hover.