d3 브러시에 이벤트 리스너 추가

Question

d3 브러시 (특히 이벤트 사각형)로 만든 직사각형을 만드는 방법을 알아 내려고 노력 중이며 click 이벤트에 응답합니다. 결국,이 개체에 대한 한 번의 클릭으로 메뉴를 표시하고 싶습니다. 그러나 rect 요소에서 이벤트를 잡을 수없는 것 같습니다.

나는 다음 코드를 시도했다 :

var selector = d3.svg.brush(); 

var x = d3.scale.linear() 
    .range([0,500]) 
    .domain([0,500]); 

var y = d3.scale.linear() 
    .range([0,500]) 
    .domain([0,500]); 

d3.select('#myDiv') 
    .append('svg') 
    .attr('id','mySVG') 
    .attr('height',500) 
    .attr('width',500) 
    .call(selector.x(x).y(y).on('brushend',bindSelect)) 

function bindSelect(){ 
    d3.select('#mySVG rect.extent') 
     .on('click',function(){alert('hi mom!')}) 
} 

bindSelect는 .extent 사각형을 선택 성공적으로 잘 화재와 같다,하지만 난 사각형을 클릭에 어떤 응답을받지 못했습니다.

문제는 d3이 사각형을 클릭 할 때 brushend 이벤트가 발생하는 것 같습니다. 나는 이벤트 전송을 중지시킬 것이라고 추측합니다.

누구든지이 문제를 해결하는 방법을 알고 있습니까? 내 유일한 생각은 brushend 이벤트에서 범위 바로 위에 다른 rect를 만든 다음 그 중 하나를 사용하여 클릭 동작을 처리하는 것입니다. 그러나 작업을 수행하는 지저분한 방법처럼 보입니다. 또한

, here is a fiddle of the code.

Answer 1

당신은 약간의 털이 수와 D3 소스 코드를 변경해야 할 수 있습니다 원하는 이벤트를 얻기. 그러나 brushend 이벤트를 브러시에 제공된 메서드와 함께 사용하여 누군가 브러쉬 사각형을 클릭했는지 여부를 파악할 수 있습니다.

var extent = selector.extent(); 

function bindSelect(){ 
    if(!selector.empty() && !(extent < selector.extent() || extent > selector.extent())) { 
    console.log("foo"); 
    } 
    extent = selector.extent(); 
} 

아이디어는 선택이 비어 있지 선택된 범위가 마지막 brushend 행사에서였다 같은 경우, 다음 사용자가 조작하는 대신 선택에 클릭 있다는 것입니다. 두 가장자리의 경우 처리 할 수 ​​

Answer 2

이 라스의 대답의 약간 개선 된 버전입니다 : 당신이 브러쉬를 드래그하고 정확한 원래 위치의에 반환하는 경우

1. 을,이 이벤트를 트리거합니다.
2. 브러시를 컨테이너 끝까지 드래그하면 커서가 움직이는 동안 브러시가 움직이지 않고 이벤트가 트리거됩니다. 이 같은 브러시를 설정

첫째, 그런 다음

selector.x(x).y(y).on('brushstart', saveCursorPos) 
        .on('brushend', checkIfMoved)) 

,

var clickPos = [-1,-1]; 

function saveCursorPos() { 
    var e = d3.event.sourceEvent; 
    clickPos = [e.clientX,e.clientY]; 
} 

function checkIfMoved() { 
    var e = d3.event.sourceEvent; 
    if(!selector.empty() && clickPos[0] === e.clientX && clickPos[1] === e.clientY) { 
     alert("foo"); 
    } 
} 

드래그를 시작할 때 브러시 정도 반대로 마우스 위치를 저장할 수있는 아이디어를, 단추를 놓을 때 변경되었는지 확인하십시오.