javascript - 自下而上动画 d3 图

Question

我正在尝试使 d3 条形图在加载时从 x 轴向上产生动画。这是到目前为止我的代码:

$(document).ready(function(){
                        setTimeout(function(){
                    var t = 0, // start time (seconds since epoch)
                        v = 70, // start value (subscribers)
                        data = d3.range(4).map(next); // starting dataset

                    function next() {

                        return {
                            value: v = dataArray[t].length,
                            time: ++t
                        };
                    }

                    var w = 30,
                        h = 80;

                    var x = d3.scale.linear()
                        .domain([0, 1])
                        .range([0, w]);

                    var y = d3.scale.linear()
                        .domain([0, 100])
                        .rangeRound([0, h]);

                    var barPadding = 5;

                    var chart = d3.select("#revenue").append("svg")
                        .attr("class", "chart")
                        .attr("width", w * data.length + (data.length-1)*8)
                        .attr("height", h);

                    var rects = chart.selectAll("rect")

                        .data(data)
                        .enter().append("rect")

                        .attr("x", function(d, i) { return i*35; })
                        .attr("y", function(d) { return h - y(d.value) - .5; })
                        .attr("width", w)
                        .attr("fill", "white")
                        .attr("height", function(d) { return 0; });

                    rects.data(data)

                        .transition().duration(2000).delay(200)
                        .attr("height", function(d) { return y(d.value); })
                        .attr("y", function(d) {return h-y(d.value); });
                    },2000);
                    });

我知道答案在于同时对 Y 位置进行动画处理，使其呈现出向上生长的外观，但无论我如何更改，我都无法让它从下往上进行动画处理。

Answer 1

            graph.selectAll("rect")
                  .append("animate")
                  .attr("attributeName","y")
                  .attr("attributeType","XML")
                  .attr("begin","0s")
                  .attr("dur","1s")
                  .attr("fill","freeze")
                  .attr("from",yaxis_offset)
                  .attr("to",function(d){return yscale(d.value);} );

          graph.selectAll("rect")
                  .append("animate")
                  .attr("attributeName","height")
                  .attr("attributeType","XML")
                  .attr("begin","0s")
                  .attr("dur","1s")
                  .attr("fill","freeze")
                  .attr("from",0)
                  .attr("to",function(d){return yaxis_offset-yscale(d.value);});

这是我按照您所说的为条形图设置动画的代码...根据您的需要更改变量..