我正在尝试使用 d3.js 创建一个动画条形图。我希望条形像这个示例http://nvd3.com/ghpages/multiBar.html一样一一出现。我能够创建类似的行为，但是运动从条形的高度开始，将条形构建到 x 轴，但是我希望运动从 x 轴开始并像示例一样到达条形的高度.
我的代码的简化版本：http: //jsfiddle.net/gorkem/ECRMd/
任何帮助将非常感激
问问题
18118 次
2 回答
43
因为坐标系的原点来自左上角，所以“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））。这具有将条的底部固定到轴的效果。
希望这可以帮助！
于 2012-07-06T16:02:27.113 回答
0
请记住，x 比例与您期望的相反（必须从底部向上构建条形图（其中底部 = svg 高度）。在输入时使用过渡动画条形图。
我认为你正在努力实现的一个例子可以在这里找到：http: //bl.ocks.org/jamesleesaunders/f32a8817f7724b17b7f1
一切顺利，
吉姆
于 2015-08-11T11:15:32.653 回答