どのように私は各垂直バーの上部にツールチップを表示することができます

Question

私はそれがうまく整列するために同じではないunabeの方程式のカップルを書こうとしました。私は各バーの上部にツールチップを表示する必要があります。 Here is fiddle of the same

私はあなたがマウスオーバーイベントハンドラ内でd3.eventを使用する必要がありますツールチップ

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

を表示するには、マウスオーバーイベントを使用しています。イベントのx、y座標を使用するか、evnetターゲット要素のバウンディングボックスを要求することができます。 次のコードは役立つはずですが、あなたはまだtootip自体の高さを調整する必要があります：あなたはまた、foxTooltip.jsを試みることができる

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

Answer 2

。要素の特定の面に常に配置するオプションがあります。 https://github.com/MichaelRFox/foxToolTip.js