javascript - 如何有多个 d3 窗口调整大小事件

Question

我在一个页面上有三个 svg 元素，每个元素都由 D3 陪伴。每个都有自己的页面调整逻辑，由 simple module I've written 分配。使他们响应。

问题在于只有最后一个调整大小事件被触发，因为它似乎已经覆盖了之前的页面调整大小事件。这是 d3.select(window).on('resize', ...) 的预期行为吗？我习惯于 $(window).resize(...)，它在多次调用时工作正常。

我看过 this previous answer建议在 D3 中可能有多个调整大小事件。我在做傻事吗？

这是一个简单的例子 I stuck on jsFiddle :

d3.select(window).on("resize", function() {
   d3.select("#d3console").append("div").html("d3 resize event A!"); 
});

d3.select(window).on("resize", function() {
   d3.select("#d3console").append("div").html("d3 resize event B!"); 
});

$(window).bind("resize", function() {
   d3.select("#jQconsole").append("div").html("jQ resize event A!"); 
});

$(window).bind("resize", function() {
   d3.select("#jQconsole").append("div").html("jQ resize event B!"); 
});

哪些输出:

d3 resize event B!
d3 resize event B!
jQ resize event A!
jQ resize event B!
jQ resize event A!
jQ resize event B!

我知道可以将之前的调整大小函数分流到一个链中 like so .只是期待 D3 的不同行为。

Answer 1

您需要为监听器命名空间，例如on('resize.one') 和 on('resize.two')

来自API Docs :

If an event listener was already registered for the same type on the selected element, the existing listener is removed before the new listener is added. To register multiple listeners for the same event type, the type may be followed by an optional namespace, such as "click.foo" and "click.bar".