d3.js 选择不起作用答案

【问题标题】：d3.js selection not workingd3.js 选择不起作用
【发布时间】：2016-02-25 15:32:51
【问题描述】：

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

HTML

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

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

【问题讨论】：

标签： javascript html dom d3.js

【解决方案1】：

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

要动态设置使用属性

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

see updated fiddle

【讨论】：

它就像一个魅力，谢谢。但是，我也必须使用“属性”而不是“属性”来更新文本字段。我无法理解的是，文本字段会随着滑块的变化而变化，直到手动更新。一旦我更改文本字段中的值，滑块就不再更新它。但是，在将文本字段的“attr”更改为“property”后，此问题已得到解决。

【解决方案2】：

尝试对滑块使用“滑动”事件，而不是“输入”。

您可能还想查看示例here。

【讨论】：

d3.slider 不在“官方”d3.js 中，是吗？你没有直接解决他的问题。不过，你@khalid 可能会考虑它