javascript - D3js高亮栏一一连续

Question

这是示例 fiddle

下面的代码是创建栏

      svg.selectAll("rect")
   .data(dataset, key)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
        return xScale(i);
   })
   .attr("y", function(d) {
        return h - yScale(d.value);
   })
   .attr("width", xScale.rangeBand())
   .attr("height", function(d) {
        return yScale(d.value);
   })
   .attr("fill", function(d) {
        return "blue";
   })

    //Tooltip
    .on("mouseover", function(d) {
        d3.select(this).style("fill","red");
    })
    .on("mouseout", function() {
        d3.select(this).style("fill","blue");
    })  ;

鼠标悬停时栏变为红色，鼠标移开时栏变为蓝色，

我希望它连续一个接一个地变成红色，意味着第一个条红色，然后第二个条，然后第三个，向前移动后，前一个条应该恢复其原始颜色，一次只有一个红色条。应该就像当它到达结束时，它应该再次从头开始

Answer 1

结果如下:http://jsfiddle.net/DavidGuan/f07wozud/4/

我添加的代码:

function reRenderColor() {
  svg.selectAll("rect")
      .transition()
      .delay(function(d, i){ return i* 500 })
      .duration(200)
      .style('fill', 'red')
      .transition()
      .delay(function(d, i){ return i* 500 + 400 })
      .duration(200)
      .style('fill', 'blue')
}  

reRenderColor();
setInterval(reRenderColor, svg.selectAll("rect").size() * 500 + 500)