D3.js轉換

Question

我正嘗試使用d3.js創建一個動畫條形圖。我想像這個例子http://nvd3.com/ghpages/multiBar.html一樣一個一個出現吧。我能夠創建一個類似的行爲，但運動開始從酒吧的高度建立酒吧朝着x軸，但我想運動從x軸開始，並像例子一樣走到酒吧的高度。我的代碼

大大簡化版本： http://jsfiddle.net/gorkem/ECRMd/

任何幫助，將不勝感激

Answer 1

因爲座標系的原點是左上角的「Y」值在固定每個酒吧的頂部。如果'y'值是固定的，並且「高度」增加了，那麼看起來棒條就會變長。爲了讓酒吧從底部成長，您需要同時轉換'y'和'高度'。

這應該是你在找什麼，我只改變了兩行。

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

我已經開始在圖表底部的'y'值（h - 0.5）。然後當你轉換時，你增加'高度'（y（d.value））並且以相同的速度減小'y'（h-y（d.value））。這具有將杆的底部固定到軸的效果。

希望這會有所幫助！

Answer 2

記住X級是倒退到你所期望的（酒吧必須從底部（其中底部= SVG高度）向上構建的。使用過渡到上輸入動畫吧。

的例子是什麼我認爲你正在努力實現可以在這裏找到： http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

一切順利，

吉姆