Question

我有一堆时间序列数据，我想在D3中创建一个滑块来更新我的图表。我已经制作了各种滑块来练习，但是，没有绑定我的变量，或完全停止我的程序。我正在尝试实施here。我现在拥有的一小段代码是：

    <input type = "range" min="0" max="1000" value="0" step="1" onChange="something"/>
    <script> 
        var ARRAY_INDEX = 0; // I want the slider to update this variable
    </script>

ARRAY_INDEX选择要使用的JSON元素数组中的特定索引。我希望能够更改此值，而无需返回我的代码并自行更改数字。

Answer 1

我在滑块上添加了id：

<input type = "range" min="0" max="1000" value="0" step="1" id="slider"/>

使用id选择滑块元素的脚本：

var ARRAY_INDEX = 0; // You better declare this var outside the event handler function if you want to use it else where

$("#slider").on("change",function(){
    ARRAY_INDEX = $(this).val();
    console.log(ARRAY_INDEX)
});

Demo

与下面的评论中的 dandavis 一样，您也可以使用input事件代替change。
这取决于您是否希望在光标移动（实时值）上更新变量，或仅在光标“已释放”（最终值）时更新。

如何将滑块绑定到Javascript中的变量？

1 个答案:

Demo