While working on incorporating transitions into my bar chart, I encountered an issue where they would start from the axis and rise up to the desired height. Although I managed to get the transitions to function properly, the mouseover event stopped working. It's puzzling why d is undefined, considering that I had already appended the data to the plwdhBar object and referenced it later in the code.
After exploring similar solutions, I realized that the key was to first set up the bar chart bars by calling them once with the data, followed by adding the transition and then integrating the mouseover event.
Presently, this is what my code looks like: (the transition works but the mouseover doesn't, resulting in errors for the function showTooltip(d))
var plwdhBar = svg.append("g")
d3.csv("Data/"+name+".csv").then(function(dataset) {
plwdhBar.selectAll(".plwdhBar") //bar2
.data(dataset)
.enter()
.append("rect")
.attr("class","plwdhBar")
.attr("width", 30)
.attr("fill", bar2Color)
.attr("x",(d)=>xScale(d.year)+(barW/2)-15)
.attr("y", h-margin.bottom)
.transition()
.duration(200)
.attr("y",(d)=>yBarScale(d.plwdh))
.attr("height", (d)=>(h-yBarScale(d.plwdh)) -margin.bottom)
plwdhBar.on("mouseover",function(d){
showTooltip(d);
}).on("mouseout",function(){
removeTooltip();
});
}
I also attempted removing the transition code and simplifying it to:
plwdhBar.transition()
.duration(200)
.attr("y",(d)=>yBarScale(d.plwdh))
.attr("height", (d)=>(h-yBarScale(d.plwdh)) -margin.bottom)
However, this approach also resulted in an undefined error for d
In all scenarios, the error message reads TypeError: d is undefined. This occurs in the first code snippet when the removeToolTip(d) function is executed, and in the second scenario during the
.attr("y",(d)=>yBarScale(d.plwdh))