2016-10-26 9 views
1

I this slider mit d3.js für eine Visualisierung bin mitBewegen des Griffs eines d3.js Schieber

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

Der Schieber sehr gut auf Drag funktioniert, aber ich kann nicht einen Weg finden, um es zu bewegen Verwenden von Javascript. Was ich versuche zu tun, so etwas wie:

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

Der Grund, warum ich dafür bin auf der Suche ist, dass ich zeitgesteuerte Ereignisse hinzufügen möchten, wo sich der Schlitten bewegt sich von selbst (von Position ii+1 zu positionieren), so dass die Visualisierung aktualisiert sich selbst ohne Benutzerinteraktion.

Antwort

2

einen Verweis auf Ihre Schieber halten und rufen .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>