D3.js 我应该如何在d3中将事件排队？

我正在使用我编写的一些d3代码开发一个小型图表库。我一直在为各种用例向图表中添加配置/自定义选项，我经常遇到冲突的事件处理程序

过渡有时给我带来麻烦，但我的问题比这更一般。在我的图表中执行一组事件处理程序的好方法是什么

我使用的一种方法是构建处理程序的文本数组，然后遍历列表，执行每个处理程序：

function chart(selection) {
  selection.each(function(data) {

    // initial config and options, including the handlers array
    var margin = {top: 20, right: 20, bottom: 50, left: 40},
        ...
        fadeOnHover = true,
        barMouseoutHandlers = [],
        barMouseoverHandlers = [];


    // create the chart


    // an option
    if (fadeOnHover) {
      barMousemoveHandlers.push(function(d, i) {
        selection.selectAll('.bar').filter(function(d, j){return i!=j;})
          .transition().duration(100).style('opacity', '.5');
        selection.selectAll('.bar').filter(function(d, j){return i==j;})
          .transition().duration(100).style('opacity', '1');
      });

      barMouseoutHandlers.push(function() {
        selection.selectAll('.bar').transition().duration(100).style('opacity', '1');
      });
    }

    // other options, which may add handlers

    // then at the end of the function, execute all handlers
    g.selectAll('.bar')
      .on('mouseover', function(d, i) {
        barMouseoverHandlers.forEach(function(handler) { handler(d, i); });
      })
      .on('mouseout', function(d, i) {
        barMouseoutHandlers.forEach(function(handler) { handler(d, i); });
      });
  });
}

这是我刚刚在我的图表上添加一些功能时想到的，但它显然不是非常模块化或组织良好。也许有空间将这些片段提取成单独的对象

还有什么其他方法？我很想听听您对此的想法。

我认为您只需要“命名”多个事件，这样它们就不会覆盖以前注册的事件。大概是这样的：

g.selectAll('.bar')
  .on('mouseover.one', function(d, i) {
    // do something
  })
  .on('mouseover.two', function(d, i) {
    // something else
  });

从：

要为同一事件类型注册多个侦听器，该类型后面可以跟一个可选的命名空间，例如“click.foo”和“click.bar”

---

你看到了吗？谢谢，我一定会看的。我的问题也适用于同步任务。基本上，我正在尝试找出如何最好地附加/删除多个事件侦听器。请详细说明“冲突事件处理程序”的含义。我有两个单独的侦听器要连接到

鼠标上方。首先是hoverLabel.popover（'hide'）

。第二个是

selection.selectAll（'.bar'）.transition（）.duration（100）.style（'opacity'，'1'）

。当我将它们分别附加到

g.selectAll（'.layer'）.selectAll（'.bar'）.on（'mouseover'，function…

上时，后者会踩在前者上。当我重复问题末尾的处理程序列表时，它会起作用。