javascript - d3.js 选择不起作用

Question

在此JSFiddle ，两个输入(文本框和 slider )相互绑定(bind)。拖动 slider 时，它会完美地更新文本框。但是，当手动更改文本框值时，它不会更新 slider 位置。对文本框进行任何手动更改后， slider 在拖动时不再更新文本框。请帮助我找出导致此行为的原因。

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);
});

Answer 1

使用 HTML slider (而不是 d3-slider，这是另一种选择)，“值”属性 仅设置初始值!

动态设置使用属性

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

see updated fiddle