Javascript d3中水平条形图的双面动画

我正在尝试实现一个与此类似的图表

我需要一个从中点开始的动画。i、 e.左侧图表应从右向左过渡，右侧图表从左向右过渡，原点为中间

我试过了

.transition()
        .delay(100)
        .attr({'x': rightOffset, 'y': yPosByIndex, height: y.rangeBand(), width: xTo})
        .duration(500);

但它将整个图形从左向右转换

---

如果有任何帮助，我们将不胜感激。

您需要将棒的初始位置设置为中心。这仅适用于右侧的矩形否。将“初始位置”设置为“中心”，将“宽度”设置为“0”，然后过渡到“最终位置”和“宽度”。两者都适用。看见