Question

我是网络开发的新手，并且遇到了我正在制作的d3可视化墙。我需要一个范围滑块，它将循环通过一个二维数组（代表不同的时间点）来改变几个SVG元素的颜色。

据我所知，到目前为止我所拥有的功能似乎完全正常。但是，我无法弄清楚如何在HTML范围滑块中添加播放/暂停功能以挽救我的生命。 almost this exact question的上一篇文章仅收到了使用d3画笔元素作为滑块的建议。这是有道理的，但它似乎更复杂，我仍然无法弄清楚如何用画笔完成播放/暂停功能。

如果您愿意，请参阅下面嵌入的我的玩具示例的完整代码，或this fiddle中的完整代码。我猜有一种方法可以用jQuery做到这一点 - 但是希望尽可能地减少依赖关系，所以我需要一个基于vanilla javascript或d3的解决方案。谢谢！

var dataSet = [
  [1, 2],
  [2, 3],
  [3, 4],
  [4, 5],
  [5, 4]
];

var colorScale = d3.scale.linear()
  .domain([0, 2.5, 5])
  .range(["red", "white", "blue"]);

//Draw the SVG element, then the circles
var svg = d3.select('#circles')
  .append("svg")
  .attr("width", 200)
  .attr("height", 900)
  .append('g')
  .attr('id', 'foo');

svg.append('circle')
  .attr({
    "cx": 45,
    'cy': 45,
    'r': 15,
    'id': 'circle1'
  });

svg.append('circle')
  .attr({
    "cx": 90,
    'cy': 45,
    'r': 15,
    'id': 'circle2'
  });

//Initialize the color fill in each circle
d3.select('#circle1')
  .style('fill', function(d) {
    return colorScale(dataSet[0][0]);
  })
  .transition();

d3.select('#circle2')
  .style('fill', function(d) {
    return colorScale(dataSet[0][1]);
  })
  .transition();

//The function which updates the fill of the circles to match a new time point 			
function update(timePoint) {
  d3.select('#circle1')
    .transition().duration(500)
    .style('fill', function(d) {
      return colorScale(dataSet[timePoint][0]);
    });
  d3.select('#circle2')
    .transition().duration(500)
    .style('fill', function(d) {
      return colorScale(dataSet[timePoint][1]);
    });
};

//Run the update function when the slider is changed
d3.select('#rangeSlider').on('input', function() {
  update(this.value);
});

html {
  background-color: lightgray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<body>
  <div id="slider">
    <input type='range' min='0' max='4' step='1' value='0' id='rangeSlider' />
    <button type="button" id="start">start</button>
    <button type="button" id="stop">stop</button>
  </div>

  <div id="circles">
  </div>
</body>

Answer 1

调整小提琴：https://jsfiddle.net/bfbun6cc/4/

var myTimer;
d3.select("#start").on("click", function() {
    clearInterval (myTimer);
    myTimer = setInterval (function() {
    var b= d3.select("#rangeSlider");
      var t = (+b.property("value") + 1) % (+b.property("max") + 1);
      if (t == 0) { t = +b.property("min"); }
      b.property("value", t);
      update (t);
    }, 1000);
});

d3.select("#stop").on("click", function() {
    clearInterval (myTimer);
});

您可以使用d3的属性运算符来访问rangelider

的最小值，最大值设置

请注意，像这样设置rangelider上的值不会触发输入事件。有这样做的方法，但只使用当前值调用更新函数也可以。

带有播放/暂停循环的HTML范围滑块

1 个答案: