d3.js选择不起作用 [英] d3.js selection not working

问题描述

在此 JSFiddle 中，两个输入(文本框和滑块)都相互绑定.拖动滑块时，它会完美更新文本框.但是，当手动更改文本框值时，它不会更新滑块位置.在对文本框进行任何手动更改之后，滑块在拖动时不再更新文本框.请帮助我找出这种现象的原因.

In this JSFiddle, both inputs (textbox and slider) are bound to each other. When the slider is dragged it perfectly updated the textbox. However, when textbox value is manually changed it does not update slider position. After any manual change to the text box, the slider no longer updates the textbox when dragged. Please help me find out the cause of this behaviour.

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

推荐答案

使用HTML滑块(而不是d3-slider，这是另一个选择)，值" 属性仅设置初始值！

Using HTML slider (and not d3-slider which is another option), the "value" attribute only set the initial value!

要动态设置，请使用属性

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

查看更新的小提琴

这篇关于d3.js选择不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！