D3.js 如何在每个垂直条的顶部显示工具提示

我已经试着为同一个方程写了两个方程，但是为了使它很好地对齐，我没有这样做。我需要在每个栏的顶部显示工具提示。

我正在使用鼠标悬停事件显示工具提示

sets.append("rect")
                    .attr("class","global")
                    .attr("width", xScale.rangeBand()/2)
                    .attr('y', function(d) {
                        return yScale((d.global/total)*100);
                    })
                    .attr("height", function(d){
                        return h - yScale((d.global/total)*100);
                    })
                    .attr('fill', function (d, i) {
                    return color(d.global);
                    }) 
                    .on('mouseover', function(d, i) {
                        var xPos = xScale.rangeBand()*i;
                        //console.log(xScale(i)); 6 190 282
                        console.log(xScale.rangeBand()*i);
                        var yPos = yScale((d.global / total) * 100);

                        d3.select('#hor_tooltip')
                            .style('left', xPos + 'px')
                            .style('top', yPos + 'px')
                            .style('display', 'block')
                            .html(d.global);
                    })
                    .on('mouseout', function() {
                        d3.select('#hor_tooltip').style('display', 'none');
                    })
                    .append("text")
                    .text(function(d) {
                        return commaFormat((d.global/total)*100);
                    })
                    .attr("font-family", "sans-serif")
                    .attr("font-size", "11px")

---

您应该在mouseover事件处理程序中使用d3.event。您可以使用事件的x、y坐标或请求evnet目标元素的边界框。 以下代码应该会有所帮助，但您仍然需要调整tootip本身的高度：

 var px = d3.event.pageX;
 var py = d3.event.target.getBoundingClientRect().top;

---

您也可以尝试foxTooltip.js。它有一个选项，可以始终定位在元素的特定一侧。

---

我也做过同样的工作，得到了这个；这就是你想暗示的吗？是的，我只是想让toottip位于横杆上方（顶部）。d3.event.pagex相对于横杆的位置是什么？鼠标位置？是的，鼠标相对于整个文档的X坐标。嘿，它与chrom配合得很好，但在IE中，黑色框首先出现，然后是实际的工具提示样式。猜猜为什么？