2016-10-26 66 views
1

我使用this slider與d3.js移動一個d3.js滑塊

var mySlider = d3.select("#slider") 
        .call(d3.slider() 
         .axis(true) 
         .min(0) 
         .max(50) 
         .step(1) 
         .on("slide", function (evt, value) { 
          updateViz(value)) 
         })); 

滑塊工作得非常好就拖一個可視化的手柄,但是我無法找到一種方法來移動它使用javascript。我所試圖做的是一樣的東西:

d3.select(mySlider) //select my slider (or its handle) 
    .moveHandle(6) //moves the handle of my slider to position(6) 

爲什麼我要尋找的原因是,我想補充的定時事件,其中通過自身滑塊移動(從i位置定位i+1),所以可視化自動更新,無需用戶交互。

回答

2

保持對它的引用您的滑塊,並呼籲.value(i)

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script data-require="[email protected]" data-semver="3.5.17" src="https://d3js.org/d3.v3.min.js"></script> 
 
    <link rel="stylesheet" href="https://rawgit.com/MasterMaps/d3-slider/master/d3.slider.css" /> 
 
    <script src="https://rawgit.com/MasterMaps/d3-slider/master/d3.slider.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="slider"></div> 
 
    <script> 
 
    var slider = d3.slider().value(50); 
 
    d3.select('#slider').call(slider); 
 
    setInterval(function() { 
 
     slider.value(Math.random() * 100) 
 
    }, 500); 
 
    </script> 
 
</body> 
 

 
</html>