बाहरी रूप से डी 3 घटनाओं को कैसे ट्रिगर करें

Question

मेरे पास एक डी 3 चयन है जिस पर मैंने ईवेंट कॉलबैक परिभाषित किया है।

var obj = d3.select("#kk").on("mouseleave",function(){ 
       console.log("mouse leave");  
      }); 

मैं घटना को बाहरी रूप से कैसे ट्रिगर कर सकता हूं?

obj.mouseleave(); // actuall mouse leave function calling 

अगर वहाँ है, और अगर मैं obj का जिक्र किए बिना ऑब्जेक्ट का चयन ट्रिगर अभी भी काम करेगा: वहाँ की तरह कुछ है?

में के रूप में:

var newObje=d3.select("#kk"); 
newObje.mouseleave(); //will this trigger the previously defined instructions 

Answer 1

आप पहले से ही डी 3 v4 पर हैं, तो आप selection.dispatch() जो विशेष रूप से वास्तव में क्या करने के लिए डिजाइन किया गया था का उपयोग कर सकते के लिए आप क्या देख रहे हैं:

#चयन। प्रेषण (प्रकार [, मापदंडों]) <>

डिस्पैच प्रत्येक चयनित तत्व को निर्दिष्ट प्रकार के custom event, क्रम में।

यह समस्या "Ability to trigger event handlers manually. #100" के परिणामस्वरूप v4 में शामिल किया गया था।

इसके अलावा, विधि आपको चयन में निहित सभी तत्वों के लिए उसी प्रकार की घटनाओं को प्रेषित करने में सक्षम करेगी। उस विधि का कार्यान्वयन अन्य उत्तरदाताओं के दृष्टिकोण के समान दिखता है जो उपयोग करने के लिए event.dispatch() डालकर लिया जाता है, लेकिन यह आपके जीवन को कुछ आसान बना देगा। निम्नलिखित स्निपेट में प्रत्येक व्यक्तिगत सर्कल के लिए श्रोता होता है, जिसे सभी बटन एक बार में ट्रिगर कर सकते हैं।

var circles = d3.select("svg").selectAll("circle") 
 
    .data(d3.range(5)) 
 
    .enter().append("circle") 
 
    .attr("cx", function(d, i) { return 60 * i + 20; }) 
 
    .attr("cy", "30") 
 
    .attr("r", "20").attr("fill", "blue") 
 
    .on("mouseleave",function(){ 
 
     d3.select(this) 
 
     .attr("fill", "red") 
 
     .transition().duration(1000) 
 
     .attr("fill", "blue"); 
 
    }); 
 

 
d3.select("#btn") 
 
    .on("click", function() { 
 
    circles.dispatch("mouseleave"); 
 
    });

<script src="https://d3js.org/d3.v4.js"></script> 
 
<svg width="400" height="70"></svg> 
 

 
<button id="btn">Dispatch mouseleave to all circles</button>

Answer 2

आप mouseleave के लिए एक स्थिर समारोह बनाने के लिए और इस तरह माउस छुट्टी पर इसे कहते या बाह्य रूप में अच्छी तरह कर सकते हैं:

function mouseleave(){   // Main mouse leave function. 
    console.log('inside mouseleave function.');  
} 



var obj = d3.select("#kk").on("mouseleave",function(){ // It will call on actual mouse leave event 
        console.log("mouseleave"); 
        mouseleave(); 
       }); 

    mouseleave(); // call it externally when ever you want. 

Answer 3

निम्नलिखित पर mouseleave घटना को ट्रिगर किया जाएगा dispatchEvent() के माध्यम से तत्व।

var event = document.createEvent('Event'); 
    event.initEvent('mouseleave', true, true); 

    d3.selectAll("circle").node().dispatchEvent(event); 

उदाहरण: http://codepen.io/anon/pen/eBYvVN (। मैं इसे गति प्रदान करने के नीचे स्थित बटन को जोड़ दिया है mouseleave घटना हलकों से जुड़ा हुआ है)

Answer 4

हाँ, आप घटना को गति प्रदान करने d3 जरूरत नहीं है, वेनिला जावास्क्रिप्ट इसके लिए पर्याप्त है। आपको बस dispatchEvent फ़ंक्शन का उपयोग करने की आवश्यकता है।

यहां एक उदाहरण है कि आप इसे कैसे करेंगे (उदाहरण के लिए बटन से)।

मैंने दोनों d3.select रास्ता और सादा जेएस रास्ता जोड़ा, दोनों को ठीक काम करना चाहिए।

d3.select("#kk").on("mouseleave",function(){ 
 
    console.log("mouseleave"); 
 
}); 
 

 
var button = document.getElementById('trigger-event'); 
 
button.onclick = function() { 
 
    var evt = new MouseEvent("mouseleave"); 
 
    
 
    // The way to dispatch the event using d3 
 
    d3.select('#kk').node().dispatchEvent(evt); 
 
    
 
    // The way to dispatch it with plain JS 
 
    document.getElementById('kk').dispatchEvent(evt); 
 
};

#kk { 
 
    width:100px; 
 
    height:100px; 
 
    background-color:blue; 
 
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div id="kk"> 
 
    
 
</div> 
 

 

 
<button id="trigger-event">trigger event</button>