D3.js选择不起作用

d3.js selection not working

本文关键字：不起作用 选择 js D3      更新时间：2023-09-26

在此JSFiddle中，两个输入（文本框和滑块）相互绑定。拖动滑块时，它会完美地更新文本框。但是，当手动更改文本框值时，它不会更新滑块位置。对文本框进行任何手动更改后，滑块在拖动时将不再更新文本框。请帮助我找出这种行为的原因。

.HTML

<input id="textbox" type="number">
<input id="slider" type="range" min="0" max="1000">

.JS

d3.select("#textbox").on("input", function() {
   // the following line is not updating slider position
   d3.select("#slider").attr("value", this.value);
   // when the following lines are un-commented it works perfectly
   // var s = document.getElementById("slider");
   // s.value = this.value;
});
d3.select("#slider").on("input", function() {
  d3.select("#textbox").attr("value", this.value);
});

使用 HTML 滑块（而不是另一个选项的 d3-slider），"value" 属性仅设置初始值！

动态设置使用属性

d3.select("#slider").property("value", this.value);

查看更新的小提琴

尝试对滑块使用"slide"事件，而不是"input"。

您可能还想在此处查看示例。

相关文章：