工具提示未显示

Question

我正在制作小提琴中的条形图。我试图附加工具提示，但它只在鼠标悬停时更改颜色，没有显示任何值。Here's the fiddle i am working on

我将工具提示附加为 -

                                  d3.select('#tooltip')
                                    .style('left', xPos + 'px')
                                    .style('top', yPos + 'px')
                                    .style('display','block')
                                    .select('#value')
                                    .text(d.global); 

Answer 1

你需要包含一个带有id工具提示的div才能工作。我还编辑了mouseover和mouseout功能。它们应该作用于矩形，因此我将它们向上移动并根据您的方程式计算xPos和yPos。

这是更新的小提琴：https://jsfiddle.net/c74eoo2b/6/

HTML

<div id="tooltip"></div>

JS

.on('mouseover', (d, i) => {
    var xPos = xScale(i);
    var yPos = yScale((d.global / total) * 100);

    d3.select('#tooltip')
        .style('left', xPos + 'px')
        .style('top', yPos + 'px')
        .style('display', 'block')
        .html(d.global);
})
.on('mouseout', function() {
    d3.select('#tooltip').style('display', 'none');
})

希望这有帮助。