d 3イベント(二):イベントのトリガとカスタムイベント

第4版では、d 3にjqueryのtrigger関数と同様にdom要素のイベント処理関数をトリガするイベントのトリガ関数dispatchが追加された.また、d 3の選択セットは、任意の名前のイベントと関連するイベント処理関数、すなわちカスタムイベントを登録することもできる.
ページに「d 3イベント(一):イベントの登録とネーミングスペース」に関する要素がまだ存在すると仮定し、これに基づいて以下の操作を行う.

d3.selectAll('button')
  //    d       ，i           ，group         
  .on('hello', function(d, i, group) {
       //         
       var event = d3.event,
           output =  'Hello,' + d.username;
       //    event        
       if(event.detail && event.detail.suffix) {
            output += event.detail.suffix                
       }
       //          
       alert(output);
  })

helloはhtml標準のイベントタイプではないので、バインドされたイベント関数をトリガーできない場合はdispatchを使用してトリガーする必要があります.

//    hello    
d3.selectAll('button').dispatch('hello', {
                //             d3.event   
                detail : {
                    suffix : '!'
                }
            }); 
//      "Hello,yiifaa!"              

dispatchは関数を非常に迅速に励起し、現在の要素のコンテキストを保持することができ、より個性的で強力なトリガ関数が必要な場合はcustomEventを使用する必要があります.customEventという名前を見ると、パーソナライズされたイベントを定義しているような気がしますが、イベントのトリガとして使用され、コンテキスト、転送されたデータ、d 3イベントのパッケージを制御することができます.

d3.customEvent(
    //    d3.event，   html        ，     ，   d3.event      sourceEvent  
    {
        detail : {
            prefix : '  ,'
        }
    }, 
    //        
    function(params) {
        var ev = d3.event;
        //       ev.sourceEvent，        UI  
        alert(ev.detail.prefix + this.datum().username +params.suffix);
    }, 
    //            ，      this
    d3.selectAll('button'), 
    //           
    [{
        suffix : '!'
    }]
);
//          "  ，yiifaa!"