d3.js
イベントについて

構文

• .on（ 'mouseover'、function）
• .on（ 'mouseout'、function）
• .on（ 'クリック'、機能）
• .on（ 'mouseenter'、function）
• .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)

この例では、div内のスパンをid divIDホバリングするときにspanOverクラスを追加し、マウスがスパンを終了するときに削除します。

デフォルトでは、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 .off()メソッドがありません。イベントハンドラを削除するには、 nullに設定する必要がありnull 。

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