어떻게하면 각 세로 막대의 위쪽에 툴팁을 표시 할 수 있습니까?

Question

나는 똑같지 만 잘 맞출 수있는 몇 가지 방정식을 작성하려고했습니다. 각 막대의 맨 위에 툴팁을 표시해야합니다. 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