ツールチップが表示されない

Question

私はこのフィーバーの棒グラフで作業しています。私はツールチップを追加しようとしましたが、マウスオーバーで色が変わるだけで、値は表示されません。 Here's the fiddle i am working on

私はあなたがこれを機能させるためのIDツールチップを持つdiv要素を含める必要が

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

Answer 1

AS-ツールチップを追加しています。私は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'); 
}) 

・ホープ、このことができます：ここで

が更新フィドルです。