如何在d3.js中自定义事件侦听器

How can I customise event listeners in d3.js?

本文关键字：自定义 事件 侦听器 js d3      更新时间：2023-09-26

我正在制作一个基本程序，该程序使用滑块在页面周围移动矩形。我可以使用之类的东西设置滑块

<input type = "range" min = "5" max = "500"  value = "5" id = "xvalue" >

然后用参考滑块的值

d3.select("#xvalue").on("input", function() {
  update(+this.value, "x");
});

其中update（）是一个用于更改矩形位置的函数。

当滑块的值更改时，事件侦听器将触发。然而，在我看来，当滑块的"max"answers"min"属性发生变化时，事件侦听器也会触发。

如何确保事件侦听器仅在输入对象的"value"属性发生更改时触发，而不触发任何其他属性？

在我看来，更改"min"或"max"不会触发事件。例如，我只是喜欢你：

d3.select("#xvalue").on("input", function() {
    console.log("The value is " + this.value);
});

然后我创建了两个按钮，一个将最小值设置为30，另一个将其设置回5:

d3.select("#button1").on("click", function(){
    document.getElementById("xvalue").setAttribute("min", 30);
});
d3.select("#button2").on("click", function(){
    document.getElementById("xvalue").setAttribute("min", 5);
});

我点击了按钮，但它并没有触发监听器，只是更改了"min"值。当我点击一个又一个按钮时，我可以看到滑块在移动，但控制台中没有任何记录。

相关文章：