Question

我的网站上有一个范围输入，如下所示：

<input type="range"  min="1036000000000" max="1510462800000" value="0" class="slider" id ="slider"/>

我有一些D3代码可以将可视化加载到页面上。它在网上：

https://bl.ocks.org/KingOfCramers/raw/5c166e770c4a865d861452dd184b54f4/

在10秒的时间内，我希望将滑块的值从它的最小值自动化到它的最大值。拇指滑块应相应移动。

我可以在可视化完成加载我的D3代码（当前包含在d3.queue函数中）后触发此函数（可能是setTimeout？），并允许用户在达到最大值后移动滑块值。

我如何在Javascript中执行此操作？

Answer 1

这是DEMO。我相信这将有助于您实现自动化。

JS

  $(document).ready(function(){
  var val;
  var inte = setInterval(function(){
    val = $('#slider').val();
    val= parseInt(val) + 10000000000;
    $('#slider').val(val);
    $('#value').val(val);
    if(val > $('#slider').attr('max')){
      clearInterval(inte);
    }
  },10000);
});

Answer 2

在10秒的时间内，我想自动化的价值滑块从它的最小值到它的最大值。拇指滑块应该相应地移动

如果你想要一个d3方式来做到这一点，你可以转换带有d3过渡的滑块：

d3.select("#slider")
  .transition()
  .attr("value",maxValue)
  .duration(time); // in ms

这个简单的实现如下所示。如果您希望在可视化绘制后执行它，请将转换放在队列就绪函数的末尾。

d3.select("#slider")
  .transition()
  .attr("value",1510462800000)
  .duration(10000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>


<input type="range"  min="1036000000000" max="1510462800000" value="1036000000000" class="slider" id ="slider"/>

默认宽松是立方输入/输出，如上所示。如果你想改变缓动，可以使用d3.ease，下一个片段显示线性缓动：

d3.select("#slider")
  .transition()
  .attr("value",1510462800000)
  .ease(d3.easeLinear)
  .duration(10000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>


<input type="range"  min="1036000000000" max="1510462800000" value="1036000000000" class="slider" id ="slider"/>

您可以稍微修改另一个元素的值，使用转换attrTween方法在更新时访问滑块的当前值（您可能希望格式化数字）。此方法还允许您在轻松转换滑块时更新可视化：

d3.select("#slider")
  .transition()
  .attrTween("value",function() {
     return function(t) {
      var i = d3.interpolate(1036000000000, 1510462800000);
      d3.select("#text").html(i(t));
      d3.select("#input").attr("value",i(t));
      return i(t);
     }
  })
  .duration(1000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>


<input type="range"  min="1036000000000" max="1510462800000" value="1036000000000" class="slider" id ="slider"/>

<p id="text"> </p>
<input type="text" id="input" value="0"/>

随着时间的推移自动输入滑块

2 个答案: