d3.js 수동으로 NVD3 트리거 툴팁

Question

동일한 데이터를 사용하여 막대 그래프와 테이블을 만들었습니다. 테이블의 셀 위로 마우스를 가져 가면 그래프의 해당 막대가 강조 표시되고 툴팁이 표시되도록하려고합니다. 툴팁을 수동으로 트리거하는 방법을 찾는 데 어려움을 겪고 있습니다. 올바른 바에서 .trigger ('hover'), .trigger ('mouseover') 및 .trigger ('mouseenter')를 사용하지 마십시오.

막대 그래프의 특정 막대에 표시되도록 도구 설명을 수동으로 트리거하는 방법은 무엇입니까?

Answer 1

수동으로 수행하여 툴팁을 표시 할 수 있습니다 :

nv.tooltip.show([200, 400], '<p>Your content goes here</p>'); 

그런 다음 툴팁을 숨길 수는 수행

nv.tooltip.cleanup(); 

가 난 단지 코드를 검색하여 그것을 할 방법을 발견했다. 문서를 찾을 수 없습니다.

여기 (jQuery를 사용하여, 전설의 라벨에 툴팁을 표시) 내가 해결하는 데 필요한 상황에 대한 고급 예제 :

$("#chart svg .nv-series .nv-legend-text").each(function(i, elem) { 
    $(elem).hover(function() { 
     var offset = $(this).offset(); 
     // data is my array of objects passed into d3.select("#chart svg").datum(data) 
     nv.tooltip.show([offset.left, offset.top], '<p>' + data[i].longLabel + '</p>'); 
    }, function() { 
     nv.tooltip.cleanup(); 
    }); 
}); 

이 상황을 해결하기 위해, 당신은 아마 비슷한 일을 할 수있는 선택을 제외하고 개별 막대 요소. 내가/숨기기/버전 1.8.1에 대한 (다른 nvd3 차트 기준) 내 사용자 지정 차트 툴팁을 이동 표시 방법은 다음과

Answer 2

가있다 :

tooltip = nv.models.tooltip(); 

// config... 
tooltip 
    .headerEnabled(false) 
    .duration(0) 
    .valueFormatter(function(d, i) { 
     return packedBubble.valueFormat()(d, i); 
    }); 

packedBubble.dispatch.on('elementMouseover.tooltip', function(evt) { 
    evt['series'] = { 
     key: evt.data.name, 
     value: evt.data, 
     color: evt.color 
    }; 

    tooltip.data(evt).hidden(false); 
}); 

packedBubble.dispatch.on('elementMouseout.tooltip', function(evt) { 
    tooltip.hidden(true); 
}); 

packedBubble.dispatch.on('elementMousemove.tooltip', function(evt) { 
    tooltip.position({ top: d3.event.pageY, left: d3.event.pageX })(); 
}); 

... 그러니 그냥 chart.tooltip을 사용하여 차트 외부에서 hidden()/position()/data()와 같은 방식으로 조작 할 수 있습니다.