D3.js Transiciones

Question

Intento crear un gráfico de barras animado con d3.js. Quiero que las barras aparezcan una a 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 simplificada Gran parte de mi código: http://jsfiddle.net/gorkem/ECRMd/

Cualquier ayuda sería muy apreciada

Answer 1

Debido a que el origen del sistema de coordenadas es desde la parte superior izquierda, el valor 'Y' está anclado en el arriba 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, deberá hacer la transición tanto de la "y" como de la "altura" al mismo tiempo.

Esto debería ser lo que está 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----- 

He comenzado 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!

Answer 2

Recuerde que la escala x es al revés de lo que cabría esperar (barras tienen que ser construido hacia arriba desde la parte inferior (donde abajo = SVG altura). Utilice transición para animar bares en entrar.

Un ejemplo de lo Creo que está tratando de lograr se puede encontrar aquí: http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

todo lo mejor,

Jim