如何從外部觸發d3事件

我有一個d3選擇，我已經定義了事件回調。如何從外部觸發d3事件

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

來源

2016-11-04 SachiDangalla

如果你已經在D3 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>

來源

2016-11-04 10:52:20 altocumulus

這很酷，很棒的除了d3 v4，不知道這個！ –

你可以讓一個常數函數鼠標離開，並把它當鼠標離開或外部，以及這樣的：

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.

來源

2016-11-04 04:28:23 Jigar7521

我的應用程序有骨幹模型的結構複雜，回調函數實際上是存儲在一個嵌套的收集和扳機是由完全不同的一個量身定做的，我不希望讓全球功能。 – SachiDangalla

以下將觸發對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事件被連接到圓）

來源

2016-11-04 04:40:50

是的，你不需要D3觸發事件，香草javascript已經足夠了。您只需使用dispatchEvent函數。

下面是一個例子，你將如何做到這一點（例如從一個按鈕）。

我同時添加了d3.select方式和純JS方式，兩者都應該正常工作。

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>

來源

2016-11-04 04:54:32

如何從外部觸發d3事件

回答

相關問題