javascript - Issues showing tooltips in a dynamic d3 stack bar chart

Question

I have a dynamic d3 stack bar chart. You can see it here.

The chart is working fine without the tooltips. I want to add tooltips on each of the bars' stacks, which will show the corresponding values.

The code was,

 var rect = layer.selectAll("rect")
                .data(function (d) {
                    return d;
                });

And to add the tooltips, I have modified them to

var rect = layer.selectAll("rect")
.data(function (d) {
    return d;
})
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });

                  

The tooltip is not stable. It does not show in all the bars. I call the draw() method twice, tooltips then working in all the bars.

From the above, you can see, clicking the Quarter and Month button twice solves the problem.

What is the problem here?

question from:https://stackoverflow.com/questions/65935895/issues-showing-tooltips-in-a-dynamic-d3-stack-bar-chart

Answer 1

You are assigning the event handlers before you append the rects.

The first time you go from Year to Quarter the tooltip only appears on the first column because the event has only been applied to the first rects making up the column because there was only one column in the Year view.

Likewise, going from Quarter to Month, the tooltip only appears on the first four columns because that's how many columns were in the Quarter view.

When you click Quarter and Month for the 2nd (or more) occasion the rects now exist from the first time the button was clicked and the event handlers can attach.

The consistent behaviour you're looking for is just a matter of taking this code

var rect = layer.selectAll("rect")
  .data(function (d) {
    return d;
  }) // ------------------------------------------------------------ remove from below ↓↓↓↓↓
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });

And moving it down to the section where you append rects just after the // Draw Legends ends comment:

rect.enter().append("rect")
  .attr("x", function (d) {
    return x(d.x);
  })
  .attr("y", function (d) {
    return y(d.y + d.y0);
  })
  .attr("height", function (d) {
    return y(d.y0) - y(d.y + d.y0);
  }) 
  .attr("width", x.rangeBand()) // -------------------------------- add below here ↓↓↓↓↓
  .on("mouseover", function() { tooltip.style("display", null); })
  .on("mouseout", function() { tooltip.style("display", "none"); })
  .on("mousemove", function(d) {
    var xPosition = d3.mouse(this)[0] - 15;
    var yPosition = d3.mouse(this)[1] - 25;
    tooltip.attr("transform", "translate(" + xPosition + "," + yPosition + ")");
    tooltip.select("text").text(d.y);
  });