无法在d3中添加过渡

Question

我想在d3中设计的垂直栏上添加过渡效果。 我是d3的新手，我曾尝试添加transition（）方法，但工作并不安静。 我的代码如下-

svg.selectAll(".bar")
            .data(data)
            .enter().append("g")
            .attr("class", "bar")
            .append("rect")
            .attr("rx", barRadius)
            .attr("fill", function(d,i) {
                 var drilledvalue;
                    try {
                        drilledvalue = JSON.parse(parent.$("#drills").val())[colIds[0]];
                    } catch (e) {
                    }
                    if (typeof drilledvalue !== 'undefined' && drilledvalue.length > 0 && drilledvalue.indexOf(d[columns[0]]) !== -1) {
                        return drillShade;
                    }
                if(typeof chartData[div]["transpose"] === "undefined" || chartData[div]["transpose"]=='N')
                {
                return getDrawColor(div, parseInt(i));//"url(#gradientBar_" + (d[columns[0]]).replace(/[^a-zA-Z0-9]/g, '', 'gi') + ")";
                }
                else
                {
                    return color(0);
                }
            })
            // .attr("color_value", "steelblue")
            .attr("index_value", function(d, i) {
                return "index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi');
            })
            .attr("class", function(d, i) {
                return "bars-Bubble-index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div;
            })
            .attr("id", function(d) {
                return d[columns[0]] + ":" + d[measure1];
            })
            .attr("onclick", fun)
            .attr("x", function(d) {
                return x(d[columns[0]]);
            })
            .attr("width", x.rangeBand())
            .attr("y", function(d) {
                return y(d[measure1]);
            })
            .attr("height", function(d) {
                return height - y(d[measure1]);
            });

我希望条形图一次从一个图的下方出现。 请帮助。

Answer 1

没有实际的例子，很难为您提供帮助。 但是，请看一下代码，您应该将初始高度设置为0，然后在转换后设置最终高度：

svg.selectAll(".bar")
//all settings
.attr("height",0)
.transition()
.duration(1000)//1 second
.attr("height",function(d)( return height - y(d[measure1]);));

编辑：

抱歉，当然是从顶部传来的，您需要旋转导条。 另外，您可能需要在应用旋转后重新评估高度计算

svg.selectAll(".bar")
    //all settings
    .attr("height",0)
    .attr("transform", "rotate(180,x,y)"); //note y must be the bottom of the chart
    .transition()
    .duration(1000)//1 second
    .attr("height",function(d)( return height - y(d[measure1]);));