在d3图表中平滑条形顺序的过渡

Question

我允许用户根据他们选择的指标，按时间顺序或从最高到最低的降序排列条形图中的数据。

条形高度本身是平滑过渡的，但是当选择降序时，数据数组的顺序会发生变化，这意味着条形的顺序也需要改变。现在，在这种情况下，新数据只是闪烁其更新（没有任何平滑的动画）。我将在这个额外的过渡中建立什么？或者甚至更好，我将如何定位？

scope.render = function(data){
    if (scope.metric !== "") {
        var maximumY = d3.max(data, function(d) {
            return eval('d.' + scope.metric);
        });
        x.domain(data.map(function(d) { return d.id; }));
        y.domain([-(maximumY * .01), d3.max(data, function(d) { return eval('d.' + scope.metric); })]);
        chart.select(".x.axis").remove();
        chart
            .append("g")
            .append("line")
            .attr('x1',0)
            .attr('x2',width)
            .attr('y1',height )
            .attr('y2',height)
            .attr('stroke-width','2')
            .attr("class", "domain");

        chart.select(".y.axis").remove();
        chart.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", -40)
            .attr('class','label')
            .attr("x", -height)
            .attr("dy", ".71em")
            .style("text-anchor", "begin")
            .text(scope.label);

        var bar = chart.selectAll(".bar")
            .data(data, function(d) { return d.id; });

        // new data:
        bar.enter()
            .append("g")
            .attr("class", "bar-container")
            .append("rect")
            .attr("class", "bar")
            .attr('fill','#4EC7BD')
            .attr("x", function(d) { return x(d.id); })
            .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
            .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); })
            .attr("width", x.rangeBand())
            .on('click', function(d){
                scope.showDetails(d, eval('d.'+scope.metric))
            })

        // removed data:
        bar.exit().remove();
        // updated data:
        bar
            .transition()
            .duration(750)
            .attr("y", function(d) { return y(eval('d.'+scope.metric)); })
            .attr("height", function(d) { return height - y(eval('d.'+scope.metric)); });

    }
};

如果我能提供任何其他内容，请告诉我。