How to fire d3 events externally

Question

I have a choice of d3 on which I defined event callbacks.

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

How can I trigger an event from outside? There is something like:

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

If there is, and if I select an object without a link to obj , will the trigger fire?

How in:

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

Answer 1

If you are already on D3 v4 , you can use selection.dispatch() , which was specifically designed for exactly what you are looking for:

# . sending (type [, parameters]) <>

Sends a custom event of the specified type for each selected item in order.

This was included in v4 as a result of the "Ability to start event handlers manually. # 100" problem.

In addition, this method allows you to send events of the same type to all elements contained in the selection. The implementation of this method is similar to the approach that other responders took, using event.dispatch() to use, but will make your life a little easier. The following fragment has a listener for each individual circle, which can be called by the button at the same time.

 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

Yes, you do not need d3 to fire the event, vanilla javascript is enough for this. You just need to use the dispatchEvent function.

Here is an example of how you do it (for example, using a button).

I added both the d3.select path and the simple JS method, both should work fine.

 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 3

The following will raise the mouseleave event for elements through dispatchEvent() .

  var event = document.createEvent('Event'); event.initEvent('mouseleave', true, true); d3.selectAll("circle").node().dispatchEvent(event); 

Example: http://codepen.io/anon/pen/eBYvVN (I added a button below to trigger it. The mouseleave event is bound to circles)

Answer 4

You can make one constant function for mouseleave and call it when you delete the mouse or from the outside, just like this:

 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.