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

一切顺利，

吉姆