3

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

据我所知，到目前为止，我所拥有的一切似乎都非常实用。但是，我无法弄清楚如何将播放/暂停功能添加到 HTML 范围滑块以挽救我的生命。几乎这个确切问题的先前帖子仅收到使用 d3 画笔元素作为滑块的建议。这是有道理的，但它似乎更复杂，我仍然无法弄清楚如何用画笔完成播放/暂停功能。

如果您愿意，请参阅下面嵌入的我的玩具示例的完整代码，或者在这个小提琴中。我猜想有一种方法可以使用 jQuery 来做到这一点——但是希望尽可能地减少依赖关系，所以我需要一个基于 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>

4

1 回答 1

3

调整后的小提琴：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 的属性运算符来访问范围滑块的最小值、最大值、值设置

请注意，像这样在范围滑块上设置值不会触发输入事件。有一些方法可以做到这一点，但只需使用当前值调用更新函数也可以。

于 2016-01-21T22:27:59.190 回答