D3.js Geçişler

Question

d3.js. kullanarak animasyonlu bir çubuk grafik oluşturmaya çalışıyorum. Çubukların bu örnekte olduğu gibi tek tek görünmesini istiyorum http://nvd3.com/ghpages/multiBar.html. Benzer bir davranış oluşturabiliyordum ama hareket çubuğun yüksekliğinden başlıyor ve çubuk x eksenine doğru ilerliyor, ancak hareketin x ekseninden başlamasını ve örneğin çubuğun yüksekliğine gitmesini istiyorum. . Benim kod

Çok basitleştirilmiş versiyonu: koordinat sisteminin başlangıç ​​Sol üstteki 'y' değeri demirli olduğu gelen Çünkü Herhangi bir yardım çok

Answer 1

mutluluk duyacağız http://jsfiddle.net/gorkem/ECRMd/

her çubuğun üstünde. Eğer 'y' değeri sabitse ve 'yükseklik' artarsa, çubuklar aşağı doğru büyür. Çubukların alttan büyümesini sağlamak için, hem 'y' hem de 'yükseklik' geçişini aynı anda yapmanız gerekir.

Aradığın şey bu olmalı, sadece iki satırı değiştirdim.

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

çizelgeye (- 0.5 saat) altındaki 'y' değeri başladık. Daha sonra geçiş yaptığınızda, 'height' (y (d.value)) değerini arttırır ve 'y' (h - y (d.value)) oranını aynı oranda azaltırsınız. Bu, çubuğun dibini eksene sabitleme etkisine sahiptir.

Bu yardımcı olur umarız!

Answer 2

x ölçekli Eğer çubuklar alttan (alt = svg yükseklik) dan yukarı doğru inşa edilmelidir (ne beklediğiniz için geriye unutmayın. Girmek parmaklık hareketlendirmek için Geçiş kullanın.

bir örneği nedir burada bulunabilir ulaşmak için çalışıyoruz düşünüyorum: çok http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

Tüm iyi,

Jim