在选择上附加基本事件
通常,你会希望为对象创建事件。
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)
当鼠标悬停在具有 id divID
的 div 内的 span 上时,此示例将添加类 spanOver
,并在鼠标退出 span 时将其删除。
默认情况下,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
键。