Transizioni D3.js

Question

Sto provando a creare un grafico a barre animato utilizzando d3.js. Voglio che le barre appaiano una alla volta come questo esempio http://nvd3.com/ghpages/multiBar.html. Sono stato in grado di creare un comportamento simile ma il movimento inizia dall'altezza della barra costruisce la barra verso l'asse x, tuttavia voglio che il movimento inizi dall'asse x e vada all'altezza della barra come nell'esempio .

versione semplificata Molto del mio codice: http://jsfiddle.net/gorkem/ECRMd/

Tutto l'aiuto sarebbe apprezzato

Answer 1

Poiché l'origine del sistema di coordinate è da alto a sinistra, il valore 'y' è ancorato al in cima a ogni barra. Se il valore "y" è fisso e l'altezza è aumentata, sembra che le barre si abbassino. Per far crescere le barre dal basso, devi passare contemporaneamente sia la 'y' che l''altezza'.

Questo dovrebbe essere quello che stai cercando, ho solo cambiato due righe.

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

Ho iniziato il valore "y" nella parte inferiore del grafico (h - 0,5). Quindi, quando esegui la transizione, aumenti l '"altezza" (y (valore d.valore)) e diminuisci la "y" (h - y (valore d.valore) alla stessa velocità. Questo ha l'effetto di fissare il fondo della barra all'asse.

Spero che questo aiuti!

Answer 2

Ricordate l'x-scala è contrario a quello che ci si aspetterebbe (barre devono essere costruite verso l'alto dal basso (dove in basso = svg altezza). Usare transizione per animare bar sulla entrare.

Un esempio di ciò che Penso che si sta tentando di raggiungere può essere trovato qui: http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

tutto il meglio,

Jim