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)).这具有将杆的底部固定到轴的效果.

希望这可以帮助!