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

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

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

출처

2014-05-14 Watty

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

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 차트 기준) 내 사용자 지정 차트 툴팁을 이동 표시 방법은 다음과

출처

2014-05-29 20:17:52

예, 그러면 올바른 방향으로 갈 수 있습니다. 그래프의 막대를 기반으로 올바른 툴팁을 만들 수 있기를 기대했지만 수동으로 같은 방식으로 표시되도록 할 수 있습니다. 내가 바라던 것보다 더 많은 코드가 필요합니다. – Watty

불행히도 이것은 더 이상 작동하지 않습니다. – HankScorpio

@HankScorpio이 솔루션은 문서화되지 않은 방법을 사용한다는 점에서 의미가 있습니다. 새 버전에서 작동하지 않으면 누군가가 대답을 왜곡하는 이유를 모르겠지만, 그러나이 솔루션은 OP가 사용하는 nvd3 버전에서도 계속 작동합니다. –

가있다 :

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()와 같은 방식으로 조작 할 수 있습니다.

출처

2015-11-04 14:02:14 johanj

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

답변

관련 문제