Question

我有一个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

Answer 1

如果您已经使用D3 v4 ，则可以使用selection.dispatch()专为满足您的需求而设计：

# 选择。发送（类型 [，参数]）＆lt;＆gt;

按顺序向每个选定元素调度指定类型的custom event。

由于问题"Ability to trigger event handlers manually. #100"，这已包含在第4版中。

此外，该方法还允许您将相同类型的事件分派给选择中包含的所有元素。该方法的实现类似于其他回答者使用event.dispatch()来使用的方法，但会让您的生活更轻松一些。以下代码段为每个单独的圈子都有一个监听器，这些监听器可以全部由按钮一次触发。

＆＃13;

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");
  });

＆＃13;

<script src="https://d3js.org/d3.v4.js"></script>
<svg width="400" height="70"></svg>

<button id="btn">Dispatch mouseleave to all circles</button>

＆＃13;

Answer 2

是的，你不需要d3来触发事件，vanilla javascript就足够了。您只需使用dispatchEvent函数。

以下是一个如何操作的示例（例如，从按钮开始）。

我添加了d3.select方式和简单的JS方式，两者都可以正常工作。

＆＃13;

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);
};

＆＃13;

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

＆＃13;

<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>

＆＃13;

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（我在底部添加了一个按钮来触发它。\ n mouseleave事件附加到圆圈上）

Answer 4

您可以为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.

如何从外部触发d3事件

4 个答案: