添加新数据时，条形图的d3过渡

Question

const mountChart = () => {
    if (selection) {
        y.domain([0, max(props.data, d => d.price)!]);
        x.domain(props.data.map(d => d.name));

        selection
            .attr("height", graphHeight)
            .attr("width", graphWidth)
            .attr("transform", `translate(${margin.left}, ${margin.top})`);

        selection
            .selectAll("rect")
            .data(props.data)
            .enter()
            .append("rect");

        selection
            .selectAll("rect")
            .data(props.data)
            .exit()
            .remove();

        const rects = selection.selectAll("rect").data(props.data);

        selection
            .selectAll("rect")
            .data(props.data)
            .attr("x", d => x(d.name)!)
            .attr("height", 0)
            .attr("y", y(0))
            .attr("width", x.bandwidth)
            .attr("fill", "orange")
            .merge(rects)
            .transition()
            .delay((d, i) => i * 70)
            .duration(500)
            .ease(easeBounceInOut)
            .attr("y", d => y(d.price))
            .attr("height", d => graphHeight - y(d.price));
    }
};

我希望我的条形图通过过渡来进行更新，该过渡会转移以为新数据腾出空间或填充已删除的空间。在其当前状态下，过渡将始终从底部开始，并在每次更新中从easyBounceInOut到其高度。 我应该注意props.data是一个对象数组。 我该怎么做？