Wie animiert man ein horizontales D3 Balkendiagramm?

Question

Ich arbeite derzeit mit diesem D3 Balkendiagramm: http://bl.ocks.org/juan-cb/faf62e91e3c70a99a306 Ich möchte einfach das Diagramm auf Seite laden, um von links nach rechts zu füllen. Ich habe andere Snippets von .transformiert gesehen, aber ich kann nicht richtig finden, wie ich die Animation korrekt zu meinem Diagramm hinzufügen kann. Wer hat Lust, einen Blick darauf zu werfen? Immer wenn ich lokal Änderungen vornahm (ich habe im Grunde genommen das gleiche Diagramm in meiner Webanwendung installiert), verschwindet das Diagramm vollständig und es sieht so aus, als hätte ich irgendwo einen Syntaxfehler.

Answer 1

Für von links nach rechts übergeht, müssen Sie nur die Anfangsbreite auf Null setzen und die nach transition(), auf ihren Endwert:

bar.append("rect") 
     .attr("transform", "translate("+labelWidth+", 0)") 
     .attr("height", barHeight) 
     .attr("width", 0)//this is the initial value 
     .transition() 
     .duration(1500)//time in ms 
     .attr("width", function(d){ 
      return scale(d.value); 
     });//now, the final value 

ist die Geige: https://jsfiddle.net/8v88gwqn/

Auch können Sie jede Bar eine Verzögerung für den Übergang separat verwenden:

bar.append("rect") 
     .attr("transform", "translate("+labelWidth+", 0)") 
     .attr("height", barHeight) 
     .attr("width", 0) 
     .transition() 
     .duration(1500) 
     .delay(function(d,i){ return i*250})//a different delay for each bar 
     .attr("width", function(d){ 
      return scale(d.value); 
     }); 

Hier ist die Geige mit der Verzögerung ist: https://jsfiddle.net/8v88gwqn/1/