D3js Highlight Bar One By One Continuously

Here is the sample fiddle Below code is to create bar svg.selectAll('rect') .data(dataset, key) .enter() .append('rect') .attr('x', function(d, i) { retur

Solution 1:

Here is the result: http://jsfiddle.net/DavidGuan/f07wozud/4/

Code I added:

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)  

Solution 2:

I gave .attr("id", function(d,i){return "rect"+i;}); to your rect elements in order to select them. Then, I used a recursive setTimout function to solve this with d3 transition property.

var z = 0;
  var timeoutFunc = function(){ 
  setTimeout(function(){
    if(z < 20){
      d3.select("#rect"+ z).transition().duration(350).attr("fill","red")
                           .transition().delay(550).attr("fill","blue");       
      z++;
      timeoutFunc();
    }elseif(z == 20){
        z = 0;
      timeoutFunc();
    }    
  },500);
  };

Here's an updated fiddle.

Note that durations could be changed for a better color visualization but this will give you an idea.

http://jsfiddle.net/51Lsj6ym/5/

Solution 3:

Hope this is what you want

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

fiddle