툴팁이 표시되지 않습니다

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 도구 설명과 사업부를 포함해야합니다. 나는 또한 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'); 
}) 

희망 : 여기

업데이트 된 바이올린입니다.