차트가 렌더링 된 후 dc.js 차트에 툴팁을 적용하는 방법

Question

여러 행 차트 (crossfilter + dc)가 있고 d3-tip을 사용하여 툴팁을 사용자 정의하고 싶습니다.

rowtip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function (d) { return d.key + ": " + d.value; }); 

...my dc charts ... 

... then at the bottom of my script tags ... 

d3.selectAll('g.row').call(rowtip); 
d3.selectAll('g.row').on('mouseover', rowtip.show); 

코드는 작업을 보이지만 마우스 오버 이벤트가 자동으로 트리거되지 않고 툴팁은 페이지가로드 될 때 표시되지 않습니다

그래서 기본적으로 관련 코드입니다.

하지만 콘솔에서 마지막 행 (마우스 오버)을 실행하면 모든 것이 예상대로 작동합니다.

그래서 제 질문은 내가 마우스 오버 이벤트는 페이지가로드 될 때 트리거됩니다 있도록 보장 할 수있을 것이다. Jquery $ (document) .ready (....) 시도했지만 작동하지 않았다.

요소가로드되는 순서와 관련이 있어야합니다. 하지만 나는 자바 스크립트 전문가가 아니며 d3에서는 훨씬 적다.

미리 감사드립니다.

Answer 1

귀하의 방법은 잘 작동하지만, 여기 할 수있는 관용적 dc.js를 방법 : 차트 렌더링 또는 다시 그려

chart.on('pretransition', function(chart) { 
    chart.selectAll('g.row') 
     .call(rowtip) 
     .on('mouseover', rowtip.show) 
     .on('mouseout', rowtip.hide); 
}); 

pretransition event 화재 후는.

chart.selectAll은 차트 내의 항목 만 선택하여 페이지의 우발적 인 툴팁을 방지합니다.

Answer 2

가 여기에 귀하의 요구 사항과 유사한 것,

http://bl.ocks.org/phil-pedruco/9032348

Answer 3

그래서 나는 결국 jQuery를 사용하여이 문제를 해결 할 수 있었다 확인합니다. 좀 해킹 된 것 같지만, 내가 필요한 것을 해낸다.

기본적으로 html 본문의 mouseover에서 d3-tip 함수 호출이 필요합니다.

var rowtip = d3.tip() 
    .attr('class', 'd3-tip') 
    .offset([-10, 0]) 
    .html(function(d){return d.key;}) 

$('body').on('mouseover', function(){ 

    d3.selectAll('g.row') 
     .call(rowtip) 
     .on('mouseover', rowtip.show) 
     .on('mouseout', rowtip.hide);  

});