D3.js转换 [英] D3.js Transitions

问题描述

我想使用d3.js创建一个动画条形图。我想要像这个示例 http://nvd3.com/ghpages/multiBar.html 一样逐个显示栏。我能够创建一个类似的行为，但运动从条的高度开始建立的条向x轴，但我想要的运动从x轴开始，并走到条的高度，如示例。

I am trying to create an animated bar graph using d3.js. I want the bars to appear one by one like this example http://nvd3.com/ghpages/multiBar.html . I was able to create a similar behavior but the motion starts from the height of the bar builds the bar towards the x-axis, however I want the motion to start from the x-axis and go to the height of the bar like the example.

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

Much simplified version of my code: http://jsfiddle.net/gorkem/ECRMd/

任何帮助将非常感激。

推荐答案

由于坐标系的原点是从左上角开始的，所以y值被锚定在每个条的顶部。如果'y'值是固定的，'height'增加，它看起来像条长大。为了让酒吧从底部生长，您需要同时转换y和height。

Because the origin of the coordinate system is from the top-left, the 'y' value is anchored at the top of each bar. If the 'y' value is fixed, and the 'height' is increased, it looks like the bars grow down. In order to make the bars grow from the bottom, you'll need to transition both the 'y' and the 'height' at the same time.

这应该是

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）。然后，当转换时，以相同的速率增加height（y（d.value））并减小y（h - y（d.value））。

I've started the 'y' value at the bottom of the chart (h - 0.5). Then when you transition, you increase the 'height' (y(d.value)) and decrease the 'y' (h - y(d.value)) at the same rate. This has the effect of fixing the bottom of the bar to the axis.

希望这有助于！

这篇关于D3.js转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！