Question

我尝试过为同样的方法编写几个方程式但是没有用来使它很好地对齐。我需要在每个栏的顶部显示工具提示。 Here is fiddle of the same

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

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")

Answer 1

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

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

Answer 2

你也可以试试foxTooltip.js。它可以选择始终位于元素的特定一侧。 https://github.com/MichaelRFox/foxToolTip.js

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

2 个答案: