D3.js 过渡

Question

我正在尝试使用 d3.js 创建动画条形图。我希望条形像这个例子http://nvd3.com/ghpages/multiBar.html 一样一一出现。我能够创建类似的行为，但是运动从条形的高度开始，将条形构建到 x 轴，但是我希望运动从 x 轴开始并像示例一样到达条形的高度.

我的代码的简化版本： http://jsfiddle.net/gorkem/ECRMd/

任何帮助将不胜感激

Answer 1

请记住，x 比例与您的预期相反（条形必须从底部向上构建（其中底部 = svg 高度）。使用 Transition 来为条形设置动画。

可以在此处找到我认为您正在努力实现的示例： http://bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1

一切顺利，

吉姆

Answer 2

因为坐标系的原点是左上角，所以'y'值锚定在每个条的顶部。如果 'y' 值是固定的，而 'height' 增加了，看起来条形会向下生长。为了使条形图从底部开始增长，您需要同时转换“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））。这具有将条形底部固定到轴的效果。

希望这会有所帮助！