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这是另一种选择），＆＃34;值＆＃34; 属性仅设置初始值！

动态设置属性

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

see updated fiddle

Answer 2

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

您可能还需要查看示例here。

d3.js选择不起作用

2 个答案: