Question

我使用this slider进行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），因此可视化自身更新为no用户互动。

Answer 1

保留对滑块的引用并致电.value(i)：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.17" 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>

＆＃13;

移动d3.js滑块的手柄

1 个答案: