d3.js
이벤트

통사론

• .on ( 'mouseover', function)
• .on ( 'mouseout', function)
• .on ( '클릭', 기능)
• .on ( 'mouseenter', function)
• .on ( 'mouseleave', 함수)

비고

선택 항목에 기본 이벤트 첨부

종종 개체에 대한 이벤트를 원할 것입니다.

function spanOver(d,i){
  var span = d3.select(this);
  span.classed("spanOver",true);
}

function spanOut(d,i){
  var span = d3.select(this);
  span.classed("spanOver", false);
}

var div = d3.select('#divID');

div.selectAll('span')
  .on('mouseover' spanOver)
  .on('mouseout' spanOut)

이 예는 클래스에 추가합니다 spanOver 는 ID와 사업부 내부 경간 유혹 할 때 divID 마우스가 범위를 종료 할 때를 제거합니다.

기본적으로 d3은 현재 범위와 색인의 데이터를 전달합니다. 그것은 정말 간단 하군요 this 우리가 추가 또는 제거 클래스처럼, 그것을 작업을 할 수 있도록의 컨텍스트뿐만 아니라 현재의 객체입니다.

이벤트에서 익명의 함수를 사용할 수도 있습니다.

div.selectAll('span')
  .on('click', function(d,i){ console.log(d); });

데이터 요소는 현재 선택된 객체에도 추가 될 수 있습니다.

div.selectAll('path')
  .on('click', clickPath);

function clickPath(d,i) {
  if(!d.active) {
    d.active = true;
    d3.select(this).classed("active", true);
  }
  else {
    d.active = false;
    d3.select(this).classed("active", false);
  }
}

이 예제에서는 click 이벤트가 발생하기 전에 선택 영역에 active가 정의되어 있지 않습니다. 모든 클릭 된 객체가 active 키를 포함 할지라도 경로 선택으로 돌아가려면 다시 선택해야합니다.

이벤트 리스너 제거

d3.js에는 기존 이벤트 리스너를 디파인하는 .off() 메소드가 없습니다. 이벤트 처리기를 제거하려면 null 로 설정해야합니다.

d3.select('span').on('click', null)