javascript - 使用 d3.dispatch 在 d3 组件之间广播事件

Question

我目前正致力于创建一个可重用的 d3 组件库，并希望创建一个“交互层”组件，该组件基本上在我的可视化上创建一个 svg 矩形，然后将与它的交互广播到其他监听这些交互的组件，即。鼠标悬停、鼠标移动、单击等

我一直在遵循 Mike Bostock 的可重用 d3 图表模式 (http://bost.ocks.org/mike/chart/)，虽然我可以在每个组件内部创建一个调度程序以在内部调度事件，但我无法成功地让单独的组件监听另一个组件的调度事件。所以基本上我想要一个用于我的库的调度程序，所有组件都可以在使用时进行监听。

我进行了大量搜索，但没有找到答案，甚至没有找到有关如何执行此操作的提示，如果有人有任何想法，我们将不胜感激。

Answer 1

这是一种将事件直接与 d3 组件相关联的方法，而不是强制您在全局命名空间中注册每个事件。

广播事件的组件可能如下所示:

namespace.interactiveLayer = function() {

    dispatch = d3.dispatch('myEvent'); 

    me = function() {
        // ...
        svg.on('click', function() {
          pos = d3.mouse(this);
          dispatch.myEvent(pos);
        });
    };

    me = d3.rebind(me, dispatch, 'on')

    return me;
};

监听事件的组件可能如下所示:

namespace.listenerLayer = function() {

    me = function() {
        interactive = namespace.interactiveLayer();
        d3.select("body").call(interactive);
        interactive.on('myEvent', function(d) {
            alert('You clicked on ' + d);
        });
    };

    return me;
};

我提出了一个充实的 working example here .