Question

我正在尝试访问此滑块（http://sujeetsr.github.io/d3.slider/）中的值，以获取将在同一页面上的滑块之前显示的图表。

<body>
    <script>
        function onload(){
             var test = getDocumentElementById('test').value
             alert(test)
        }
    </script>
    ...
    <h4> Slider 1 </h4>
    <div id='test'></div>
    ...
    <script>
        var slider = d3.slider().min(0).max(1).ticks(1).showRange(true);               
        d3.select('#test').call(slider);
    </script>

</body>

我无法访问滑块值。任何帮助将不胜感激。

Answer 1

奇怪的是，似乎没有很好的记录。以下是我发现的内容：您可以添加回调来捕获值，也可以调用 value（）函数，不带参数来获取当前值：

var slider = d3.slider()
      .min(0)
      .max(10)
      .showRange(true)
      .value(5)
      .callback(function(evt) {
        //fired every time the value changes
        logger.debug('callback: ' + self.slider.value());
      });

d3.select('#myslider').call(slider);
var currentVal = slider.value(); //manually get the current value

Answer 2

滑块对象通过调用它的value（）函数返回值，它不会将它绑定到div。因此，您需要将滑块保留在要使用它的范围内，并从滑块对象本身访问Javascript中的值。

var slider = d3.slider().min(0).max(1.0).ticks(10).showRange(true);

document.getElementById('showButton').addEventListener('click', function(){
     alert(slider.value());
})

它还支持添加回调函数，只要您滑动它就会调用它。

var slider = d3.slider()
        .min(0)
        .max(1.0)
        .ticks(10)
        .showRange(true)
        .callback(function(a){
                   console.log(slider.value()); // <-- this will call when you slide
                 });
d3.select('#test').call(slider);

这是一个说明用例的JSFiddle： https://jsfiddle.net/workingClassHacker/0wgps84y/8/

Javascript：访问滑块值

2 个答案: