Transiciones de D3.js

bar-chart transitions

Question

Intento crear un gráfico de barras animado usando d3.js. Quiero que las barras aparezcan una por una como en este ejemplo http://nvd3.com/ghpages/multiBar.html . Pude crear un comportamiento similar pero el movimiento comienza desde la altura de la barra construye la barra hacia el eje x, sin embargo, quiero que el movimiento comience desde el eje x y vaya a la altura de la barra como en el ejemplo .

Versión mucho más simplificada de mi código: http://jsfiddle.net/gorkem/ECRMd/

Cualquier ayuda sería muy apreciada

Answer 1

Recuerde que la escala x está hacia atrás a lo que cabría esperar (las barras deben construirse hacia arriba desde la parte inferior (donde abajo = altura de svg). Use Transición para animar las barras al ingresar.

Puede encontrar un ejemplo de lo que creo que está tratando de lograr aquí: http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

Todo lo mejor,

Jim

Answer 2

Como el origen del sistema de coordenadas se encuentra en la parte superior izquierda, el valor ''y'' está anclado en la parte superior de cada barra. Si el valor ''y'' es fijo y la ''altura'' aumenta, parece que las barras crecen. Para hacer que las barras crezcan desde la parte inferior, tendrás que hacer la transición tanto de "y" como de "altura" al mismo tiempo.

Esto debería ser lo que estás buscando, solo he cambiado dos líneas.

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-----

Empecé el valor ''y'' en la parte inferior del gráfico (h - 0.5). Luego, cuando haces la transición, aumentas la ''altura'' (y (d.value)) y reduces la ''y'' (h - y (d.value)) a la misma velocidad. Esto tiene el efecto de fijar la parte inferior de la barra al eje.

¡Espero que esto ayude!