Comment déclencher des événements d3 en externe

Question

J'ai une sélection d3 sur laquelle j'ai défini des rappels d'événements.

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

Comment puis-je déclencher l'événement en externe ? Y a-t-il quelque chose comme :

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

Si c'est le cas, et si je sélectionne l'objet sans me référer à obj le déclencheur fonctionnera-t-il toujours ?

Comme dans :

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

Answer 1

Oui, vous n'avez pas besoin de d3 pour déclencher l'événement, le javascript vanille est suffisant pour cela. Vous devez simplement utiliser la fonction dispatchEvent fonction.

Voici un exemple de la manière de procéder (à partir d'un bouton par exemple).

J'ai ajouté la méthode d3.select et la méthode simple JS, les deux devraient fonctionner correctement.

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>

Answer 2

Si vous êtes déjà sous D3 v4 vous pouvez utiliser selection.dispatch() qui a été spécialement conçu pour faire exactement ce que vous recherchez :

_#_ sélection . expédition ( type [, paramètres ]) <>

Les dépêches d'un événement personnalisé de l'article spécifié type à chaque élément sélectionné, dans l'ordre.

Ceci a été inclus dans la v4 à la suite du problème "Possibilité de déclencher manuellement les gestionnaires d'événements. #100" .

En outre, la méthode vous permettra de dispatcher des événements de même type à tous les éléments contenus dans la sélection. L'implémentation de cette méthode ressemble à l'approche adoptée par les autres répondants en mettant event.dispatch() à utiliser, mais vous facilitera quelque peu la vie. Le snippet suivant possède un écouteur pour chaque cercle individuel, qui peut être déclenché par le bouton en même temps.

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 3

Ce qui suit déclenchera le mouseleave sur les éléments via dispatchEvent() .

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

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

Exemple : http://codepen.io/anon/pen/eBYvVN (J'ai ajouté un bouton en bas de page pour le déclencher. L'événement mouseleave est attaché aux cercles)

Answer 4

Vous pouvez créer une fonction constante pour mouseleave et l'appeler au moment du départ de la souris ou en externe comme ceci :

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.