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

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

条形图本身的高度是平稳过渡的，但当选择降序时，数据数组的顺序会改变，这意味着条形图的顺序也需要改变。现在，本例中的新数据只是闪烁其更新（没有任何平滑动画）。在这个额外的过渡中，我将在哪里构建？或者更好，我该如何瞄准这一点

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)); });

    }
};

---

如果我还可以提供什么，请告诉我。

你能提供一把小提琴或一把木棍，看看哪里不行。你看到了吗？@Larskothoff，我没有看到，谢谢。看起来我需要一个transform属性，但我不确定如何实现。你能帮忙吗？如果我理解正确，这个例子实现了你想要的一切，所以你只需要根据你的情况修改代码。