D3.js Transitions
J'essaie de créer un graphique à barres animé à l'aide de d3.js. Je veux que les barres apparaissent une à une comme dans cet exemple http://nvd3.com/ghpages/multiBar.html . J'ai pu créer un comportement similaire, mais le mouvement commence à partir de la hauteur de la barre construit la barre vers l'axe des x, mais je veux que le mouvement commence à partir de l'axe des x et se place à la hauteur de la barre, comme dans l'exemple .
Version très simplifiée de mon code: http://jsfiddle.net/gorkem/ECRMd/
Toute aide serait très appréciée
Du fait que l'origine du système de coordonnées se situe en haut à gauche, la valeur "y" est ancrée en haut de chaque barre. Si la valeur "y" est fixe et que la "hauteur" est augmentée, il semble que les barres diminuent. Afin de faire croître les barres à partir du bas, vous devez faire la transition en même temps du "y" et de la "hauteur".
Cela devrait être ce que vous cherchez, je n’ai changé que deux lignes.
chart.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d, i) { return x(i) - .5; })
.attr("y", function(d) { return h - .5; }) //new----
.attr("width", w)
.transition().delay(function (d,i){ return i * 300;})
.duration(300)
.attr("height", function(d) { return y(d.value); })
.attr("y", function(d) { return h - y(d.value) - .5; }); //new-----
J'ai commencé la valeur "y" au bas du graphique (h - 0.5). Ensuite, lors de la transition, vous augmentez la 'hauteur' (y (valeur.d)) et vous diminuez le «y» (h - y(d.value)) au même rythme. Cela a pour effet de fixer le bas de la barre à l'axe.
J'espère que cela t'aides!
Rappelez-vous que l'échelle x est à l'envers par rapport à ce que vous attendez (les barres doivent être construites vers le haut à partir du bas (où bottom = svg height). Utilisez Transition pour animer les barres lors de l'entrée.
Un exemple de ce que je pense que vous essayez de réaliser peut être trouvé ici: http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1
Bonne chance,
Jim