在动态 d3 堆栈条形图中显示工具提示的问题

Question

我有一个动态 d3 堆栈条形图。你可以看到它here。

图表在没有工具提示的情况下工作正常。我想在每个条形的堆栈上添加工具提示，这将显示相​​应的值。

代码是，

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

为了添加工具提示，我已将它们修改为

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);
  });

                  

工具提示不稳定。它并未显示在所有条形图中。我调用了 draw() 方法两次，工具提示然后在所有条中工作。

从上面可以看出，点击季度和月份按钮两次即可解决问题。

这里有什么问题？

Answer 1

您在 append rect 之前分配事件处理程序。

第一次从 Year 转到 Quarter 时，工具提示仅出现在 first 列中，因为该事件仅应用于构成该列的前 rect，因为年视图中只有一列。

同样，从季度到月份，工具提示只出现在前四列上，因为这是季度视图中的列数。

当您第二次（或更多）点击 Quarter 和 Month 时，rect 现在从第一次点击按钮开始就存在并且事件处理程序可以附加。

您正在寻找的一致行为只是采用此代码的问题

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);
  });

然后将其移至您在 append 评论之后 rect // Draw Legends ends 的部分：

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);
  });