我正在尝试使用d3.js创建动画条形图。我希望条形图像这个示例http://nvd3.com/ghpages/multiBar.html一样逐个显示。我能够创建一个类似的行为但是动作从条形的高度开始将条形建立在x轴上，但是我希望动画从x轴开始并像示例那样转到条形的高度。
我的代码的大量简化版本： http://jsfiddle.net/gorkem/ECRMd/
非常感谢任何帮助
答案 0 :(得分：43)
因为坐标系的原点来自左上角，所以'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））。这具有将杆的底部固定到轴上的效果。
希望这有帮助！
答案 1 :(得分：0)
请记住x尺度向后倾斜到你想要的尺寸（条形图必须从底部向上构建（底部= svg高度）。使用“过渡”为输入上的条形图设置动画。
我认为您想要实现的目标可以在这里找到： http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1
一切顺利，
吉姆