Hinzufügen eines Wachstums Übergang zu einem Rect

Question

Ich versuche, einen schönen Übergang entweder dynamisch durch d3 oder mit CSS für die Rectures zu machen, aber ich habe wenig Glück, ein gutes Beispiel dafür zu finden.

Die Idee ist, dass ich mein Balkendiagramm von unten nach oben wachsen möchte, wenn es gerendert wird.

Das Diagramm wird mit Vega gerendert, von dem ich glaube, dass es noch keine Übergänge gibt, also brauche ich andere Optionen außerhalb der Bibliothek.

ich versuchte CSS animieren zu verwenden, aber es muss unten einige seltsamen Rendering-Probleme und auch gehe oben eher dann wird in Chrome derzeit nur Boden

rect { 
    animation: bar-fill 2s linear; 
} 

@keyframes bar-fill { 
    0% { height: 0; } 
} 

https://jsfiddle.net/zg2hnr2x/3/

Answer 1

Ihren CSS Ansatz nach oben Arbeit . height ist offiziell kein Attribut, das (noch) mit CSS animiert werden kann.

Der Grund, dass es von oben nach unten wächst, weil der Ursprung der SVGs Koordinate in der oberen linken Seite ist, und so die x, y ein <rect> Koordinate ist auch oben links. Die untere rechte Ecke eines Rechtecks ​​befindet sich unter x+width, y+height.

Wenn Sie eine browserübergreifende Möglichkeit zum Animieren von SVG-Elementen benötigen, können Sie sich eine der vielen verfügbaren JS SVG Animation-Bibliotheken ansehen.