使用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;
};

我在这里提出了一个充实的工作示例.