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)
Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow