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

Question

我svg在一个页面上有三个元素,每个元素由D3陪伴.每个人都有自己的页面调整大小逻辑,由我编写的简单模块分配,以使其响应.

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

我已经看到这个先前的答案表明在D3中可能有多个调整大小事件.我在做一些蠢事吗？

这是一个我坚持使用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!

我知道可以继续将之前的调整大小功能分流到像这样的链中.刚想到D3的不同行为.

Answer 1

您需要将侦听器命名为eg on('resize.one')和on('resize.two')

来自API文档:

如果事件侦听器已在所选元素上注册了相同类型,则在添加新侦听器之前将删除现有侦听器.要为同一事件类型注册多个侦听器,该类型后面可以跟一个可选的命名空间,例如"click.foo"和"click.bar".