2014-10-16 1 views
11

하나의 페이지에 세 개의 svg 요소가 있으며 각 요소는 D3으로 관리됩니다. 각각은 simple module I've written에 의해 할당 된 자체 페이지 크기 조정 로직을 가지고 있습니다.여러 개의 d3 창 크기 조정 이벤트가있는 방법

이전 resize 이벤트를 덮어 쓰는 것처럼 보였으므로 마지막 resize 이벤트 만 실행되는 것이 문제입니다. 이 예상 동작은 d3.select(window).on('resize', ...)입니까? 나는 $(window).resize(...)에 익숙하다. 여러 번 호출 할 때 잘 동작한다.

this previous answer은 D3에서 여러 크기 조정 이벤트가 가능하다는 것을 알았습니다. 나는 바보 같은 짓을하고 있니?

다음은 간단한 예제 I stuck on jsFiddle :

d3 resize event B! 
d3 resize event B! 
jQ resize event A! 
jQ resize event B! 
jQ resize event A! 
jQ resize event B! 

내가 하나가 체인 like so로 이전 크기 조정 기능 전철 유지할 수 있습니다 알고 출력

d3.select(window).on("resize", function() { 
    d3.select("#d3console").append("div").html("d3 resize event A!"); 
}); 

d3.select(window).on("resize", function() { 
    d3.select("#d3console").append("div").html("d3 resize event B!"); 
}); 

$(window).bind("resize", function() { 
    d3.select("#jQconsole").append("div").html("jQ resize event A!"); 
}); 

$(window).bind("resize", function() { 
    d3.select("#jQconsole").append("div").html("jQ resize event B!"); 
}); 

. D3와 다른 동작을 기대했습니다.

답변

16

예를 들어 리스너의 네임 스페이스를 지정해야합니다. on('resize.one')on('resize.two')

API Docs로부터 : 새로운 청취자가 추가되기 전에 이벤트 리스너가 이미 선택된 요소에 동일한 유형이 등록 된 경우

, 기존의 수신기는 제거된다. 동일한 이벤트 유형에 대해 여러 리스너를 등록하려면 유형에 "click.foo"및 "click.bar"와 같은 선택적 네임 스페이스가 올 수 있습니다.

+0

오, 감사합니다! –

+0

v4.0의 [doc] (https://github.com/d3/d3-selection/blob/master/README.md#selection_on)이 이동했습니다. 이 대답은 v4에서도 유효합니다. – roland

+0

감사합니다. @roland 답변의 링크를 업데이트했습니다. – explunit