如何在d3中为同一个选择注册多个外部侦听器？

Question

我正在d3中编写一个项目,其中我有一个包含两个外部javascript文件的html页面,比如script_1.js和script_2.js.
我需要从script_1.js注册一个事件监听器,从script_2.js注册另一个事件监听器,用于select元素的change事件.目前我的html中有这一行:

<select id="timebasis" class="selector" onchange="selectIndexSp(this),selectIndexBt(this)">

其中selectIndexSp(object)和selectIndexBt(object)分别在script_1.js和script_2.js中定义.我根本不喜欢这种方法,我想知道如何在d3中执行相同的任务,而不是在html文件中,我知道这不是一个好习惯.

提前致谢!

Answer 1

您可以为事件名称添加命名空间,如:

d3.select("#timebasis")
    .on("change.sp", listenersp)
    .on("change.bt", listenerbt);

请参阅:https://github.com/mbostock/d3/wiki/Selections#wiki-on

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

这些函数被传递给当前的数据d和索引i,this上下文作为当前的DOM元素.看起来你的两个函数期望DOM元素作为参数？在这种情况下,它看起来像:

d3.select("#timebasis")
    .on("change.sp", function() { selectIndexSp(this); })
    .on("change.bt", function() { selectIndexBt(this); });