在選擇上附加基本事件

通常，你會希望為物件建立事件。

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 鍵。