d3.js
इवेंट्स पर

वाक्य - विन्यास

• .on ('माउसओवर', फंक्शन)
• .on ('माउसआउट', फंक्शन)
• .on ('क्लिक', फंक्शन)
• .on ('माउसएंटर', फंक्शन)
• .on ('मूसलीव', फंक्शन)

टिप्पणियों

चयन पर बुनियादी घटनाओं को संलग्न करना

अक्सर बार आप अपनी वस्तुओं के लिए घटनाओं के लिए चाहते हैं।

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)

यह उदाहरण कक्षा spanOver जब आईडी divID साथ डिव के अंदर एक स्पैन पर divID और जब माउस स्पैन से बाहर निकलता है तो उसे हटा देता है।

डिफ़ॉल्ट रूप से 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);
  }
}

इस उदाहरण में सक्रिय क्लिक घटना से पहले चयन पर परिभाषित नहीं है। यदि आप पथ चयन पर वापस जाने के लिए थे, हालांकि सभी क्लिक की गई वस्तुओं में active कुंजी शामिल होगी।

ईवेंट श्रोता को निकालें

d3.js के पास मौजूद ईवेंट श्रोताओं को रोकने के लिए एक .off() विधि नहीं है। ईवेंट हैंडलर को निकालने के लिए, आपको इसे null पर सेट करना होगा:

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