我在一页上有三个svg元素,每个由D3分配.每个人都有自己的页面调整大小的逻辑,由
simple module I’ve written分配,使其响应.
麻烦的是,只有最后一个调整大小的事件被触发,因为它似乎已经覆盖了较早的页面大小事件.这是d3.select(window).on(‘resize’,…)的预期行为吗？我习惯于$(window).resize(…),它可以在多次调用时工作正常.
我已经看到this previous answer建议在D3中可以进行多个调整大小的事件.我在做某事吗？
这里有一个简单的例子我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不同的行为.
解决方法
您需要将侦听器命名空间,例如on(‘resize.one’)和on(‘resize.two’)
从API：
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”.