在 Mouseover 上使用 d3.js 的工具提示未显示在元素顶部

Question

我有一个使用 d3.js 的工具提示

这是我的工具提示声明

var tooltip = d3.select("body")
                    .append("div")
                    .style("position", "absolute")
                    .style("z-index", "10")
                    .style("visibility", "hidden")
                    .style("background", "white")
                    .style("text-align", "center")
                    .style("font-size", "15px")
                    .attr("class", "shade")
                    .text("a simple tooltip");

我的 CSS：

 .shade {
          border: 1px solid #e6e6e6;
          padding: 10px;
          box-shadow: 3px 2px #888888;
          width:90px;
          height:80px;
          text-align:center;
}

事件：

state.selectAll("rect")
                      .data(function (d) { return d.ages})
                      .enter().append("rect")
                      .attr("width", x1.rangeBand())
                      .attr("x", function (d) { return x1(d.name); })
                      .attr("y", function (d) { return y(d.value); })
                      .attr("height", function (d) { return height - y(d.value); })
                      .style("fill", function (d) { return color(d.name); })
                      .on("mouseover", function (d) {

                              tooltip.text("")
                              var tooltext = tooltip.append('label')
                              tooltext.text(d.name).attr("class","middleText")
                              tooltip.append("br")
                              var labeltooltip = tooltip.append('label').attr('class', GetColor(d.name))
                              labeltooltip.text(d.value)

                          return tooltip.style("visibility", "visible");
                      })
                      .on("mousemove", function () { return tooltip.style("top", (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px"); })
                      .on("mouseout", function () {

                          return tooltip.style("visibility", "hidden");
                      });

此代码运行良好，但我的问题是鼠标悬停事件旁边显示的工具提示。

我也尝试过改变类似的东西：

 .on("mousemove", function () { return tooltip.style("top", d + "px").style("left", d + "px"); })

但同样我没有运气。

我的问题是可以将光标移动到鼠标悬停事件已触发的每个元素的top 上吗？

提前致谢

Answer 1

如果我理解正确，你想要这样的东西：

.on("mousemove", function () { 
  return tooltip.style("top", this.getBBox().y + "px").style("left", this.getBBox().x + "px"); 
});