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

问题描述

我在一页上有三个svg元素，每个元素都由D3陪伴.每个人都有自己的页面调整大小逻辑，由我编写的简单模块分配他们反应灵敏.

I have three svg elements on one page, each chaperoned by D3. Each one has its own page-resize logic assigned by a simple module I've written to make them responsive.

麻烦的是，仅触发了最后一个调整大小事件，因为它似乎已覆盖了较早的页面调整大小事件.这是d3.select(window).on('resize', ...)的预期行为吗?我习惯了$(window).resize(...)，多次调用时效果很好.

The trouble is that only the last resize event is firing, as it appears to have overwritten the earlier page resize events. Is this the expected behavior of d3.select(window).on('resize', ...)? I'm accustomed to $(window).resize(...), which works fine when invoked multiple time.

我已经看到此先前的答案建议在D3中可能会发生多个调整大小事件.我在做蠢事吗?

I've seen this previous answer suggest that multiple resize events are possible in D3. Am I doing something dumb?

这是一个简单的示例，我粘在jsFiddle上:

Here's a simple example 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!

我知道人们可以继续将以前的调整大小功能分流到一个链中.只是预期与D3会有不同的行为.

I know one can keep shunting the previous resize functions into a chain like so. Just expected different behavior from D3.

推荐答案

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

You need to namespace the listeners e.g. on('resize.one') and on('resize.two')

从 API文档:

这篇关于如何具有多个d3窗口大小调整事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！