d3.js选择不起作用

Question

在这个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);
});

Answer 1

使用HTML滑块（而不是d3-slider这是另一种选择），“value” 属性只设置初始值 ！

要动态设置属性

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

看到更新的小提琴

Answer 2

尝试使用'slide'事件作为滑块，而不是'input'。

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