Looking to enhance my bar chart by adding text tooltips that appear when hovering over each bar. While I am a beginner with d3, I've been struggling to implement this feature effectively. Despite trying various methods gleaned from online resources, the tooltip isn't appearing as expected. If anyone could shed light on what I might be overlooking or where I may have gone astray, it would be greatly appreciated.
Many thanks in advance!
bar.enter()
.append("g")
.attr("class", "bar-container")
.append("rect")
.attr("class", "bar")
.attr('fill','#4EC7BD')
.attr("x", function(d) { return x(d.id); })
.attr("y", function(d) { return y(eval('d.'+scope.metric)); })
.attr("height", function(d) { return height - y(eval('d.'+scope.metric)); })
.attr("width", x.rangeBand())
.on('click', function(d){
scope.showDetails(d, eval('d.'+scope.metric))
})
// start tooltip
.on("mouseover", function(d){
console.log("D",scope.metric);
var xPos = parseFloat(d3.select(this).attr("x"));
var yPos = parseFloat(d3.select(this).attr("y"));
var height = parseFloat(d3.select(this).attr("height"))
d3.select(this)
.append("text")
.attr("class", "d3tip")
.attr("x",xPos)
.attr("y",yPos +height/2)
.text("test");
})
.on("mouseout",function(){
d3.select(".tooltip").remove();
});
// end tooltip
// removed data:
bar.exit().remove();
// updated data:
bar
.transition()
.duration(750)
.attr("y", function(d) { return y(eval('d.'+scope.metric)); })
.attr("height", function(d) { return height - y(eval('d.'+scope.metric)); });