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'。

您可能還需要在此處查看示例。