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)