将工具提示添加到 d3.js 分层条形图答案

【问题标题】：Add tooltip to d3.js hierarchical bar chart将工具提示添加到 d3.js 分层条形图
【发布时间】：2018-11-24 04:58:26
【问题描述】：

我正在尝试使用鼠标悬停分层条形图添加工具提示，因为它是由 Mike Bostock 在这里创建的 (https://bl.ocks.org/mbostock/1283663)。我无法通过传统方式添加工具提示，因为代码有点不同。谁能帮帮我？

【问题讨论】：

【解决方案1】：

你可以这样做：

  bar.append("text")
      .attr("class", "moreText")
      .attr("x", function(d) { return x(d.value) + 20; })
      .attr("y", barHeight / 2)
      .attr("dy", ".35em")
      .attr("fill", "none")
      .text(function(d) { return d.value; })

在bar 函数中添加它以获得悬停效果

  bar.on("mouseover", function() {
        d3.select(this).select(".moreText").attr("fill", "#333")
          .attr("x", function(d) { return x(d.value) + 15; })
      })
      .on("mouseout", function() {
        d3.select(this).select(".moreText").attr("fill", "none")
      })

在同一个函数中，在此处添加.attr("x", function(d) { return x(d.value) + 15; }) 以确保我们在转换前后都获得正确矩形的正确坐标，并按类引用文本，如下所示：

d3.select(this).select(".moreText")

这是一个有效的plunker

【讨论】：