d3.js
О событиях

Синтаксис

• .on ('mouseover', function)
• .on ('mouseout', функция)
• .on ('click', function)
• .on ('mouseenter', функция)
• .on ('mouseleave', function)

замечания

Прикрепление основных событий по выбору

Часто вам понадобятся события для ваших объектов.

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 при наведении курсора на пролет внутри DIV с идентификатором 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);
  }
}

В этом примере активный элемент не определен при выборе перед запуском события клика. Если вы хотите вернуться к выбору пути, хотя все объекты с кликом будут содержать active ключ.

Удалить прослушиватель событий

d3.js не имеет .off() для удаления существующих прослушивателей событий. Чтобы удалить обработчик событий, вы должны установить его в null :

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