D3js连续高亮条 [英] D3js highlight bar one by one continuously

问题描述

以下是示例小提琴

以下代码是创建bar

Below code is to create bar

      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");
    })  ;

在鼠标悬停栏上显示红色，在mouseout时返回蓝色，

On mouseover bar gets red color, and on mouseout it gets back to blue color,

我想让它连续得到红色一个接一个意味着第一个条红色然后第二个条，然后第三个，在前进前一个条应该恢复其原来的颜色，将只有一个红色bar。它应该是当它到达结束，它应该再次从开始

I want it to continuously get red color one by one means first bar red then second bar, then third, after moving ahead previous bar should restore its origin color, there will be only one red bar at a time. and it should be like when it reach to end, it should again start from beginning

推荐答案

这里是结果： 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)  

这篇关于D3js连续高亮条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！