D3js Markierungsbalken eins nach dem anderen kontinuierlich

Question

ist die Probe fiddle

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

mit der Maus darüber bar zu schaffen bekommt rote Farbe, und auf mouseout es zurück zur blauen Farbe bekommt,

Ich möchte, dass es kontinuierlich rote Farbe eins nach dem anderen erhält bedeutet zuerst bar rot dann zweiter Balken, dann drittens, nach vorheriger Bewegung sollte der vorherige Balken seine Ursprungsfarbe wiederherstellen, es wird immer nur einen roten Balken geben. und es sollte wie wenn es zu Ende erreichen, sollte es wieder von Anfang an beginnen

Answer 1

Ich gab .attr("id", function(d,i){return "rect"+i;}); zu Ihren Rect-Elementen, um sie auszuwählen. Dann habe ich eine rekursive setTimout-Funktion verwendet, um dies mit der d3-Übergangseigenschaft zu lösen.

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(); 
    }else if(z == 20){ 
     z = 0; 
     timeoutFunc(); 
    }  
    },500); 
    }; 

Hier ist eine aktualisierte Geige.

Beachten Sie, dass die Dauer für eine bessere Farbvisualisierung geändert werden kann, aber dies wird Ihnen eine Idee geben. Hier

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

Answer 2

ist das Ergebnis: http://jsfiddle.net/DavidGuan/f07wozud/4/

Code I hinzugefügt:

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) 

Answer 3

Hoffnung ist das, was Sie wollen

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

fiddle