Javascript D3.js“；“成长”；三维条形图的路径动画

我正在尝试将经典动画添加到伪3D条形图中。用rect做正确的操作非常简单。但是路径呢

我有三条3d效果的基本路径： 如何制作和谐成长的动画

  createColumns(bars, data) {
    //...skip code

    bars
      .data(data)
      .append('path')
      .attr(
        'd',
        (d) => `M 0,0 V ${rectHeight(d.value)} H ${rectWidth()} V 0 H 0 Z`,
      )
      .attr('class', 'forward-bar')
      .classed('bar', true);

    bars
      .data(data)
      .append('path')
      .attr(
        'd',
        () =>
          `M 0,0 L ${rectWidth()},0 L ${
            rectWidth() + depth
          }, ${-depth} H ${depth} Z`,
      )
      .attr('class', 'top-bar')
      .classed('bar', true);

    bars
      .data(data)
      .append('path')
      .attr(
        'd',
        (d) =>
          `M ${rectWidth()},0 L ${rectWidth() + depth},${-depth}, V ${
            rectHeight(d.value) - depth
          } L ${rectWidth()} ${rectHeight(d.value)} Z`,
      )
      .attr('class', 'side-bar')
      .classed('bar', true);
  }

---

使用D3转换实现（以毫秒为单位设置持续时间）：

const add3DBar=（父级、XPO、YPO、宽度、高度、深度、持续时间）=>{
const g=parent.append（'g'）.attr（'transform'，'translate（${xPos}，${yPos}）`）；
g、 追加（'路径'）
.attr（'d'，'m0,0v${0}H${width}v0h0z`）
.style（'fill'，'#000081'）
.transition（）
.持续时间（持续时间）
.attr（'d'，'m0,0v${-height}H${width}v0h0z`）；
g、 追加（'路径'）
.attr（'d'，'m0，${0}L${depth}，${depth}H${depth+width}L${width}，0z`）
.style（'填充'，'#0000FF'）
.transition（）
.持续时间（持续时间）
.attr（'d'，'m0，${height}L${depth}，${height-depth}H${depth+width}L${width}，${height}Z`）；
g、 追加（'路径'）
.attr（'d'，'M${width}，0l${width+depth}，${-depth}，V${-depth}L${width}，0z`）
.style（'fill'，'#0000C0'）
.transition（）
.持续时间（持续时间）
.attr（'d'，'M${width}，0l${width+depth}，${-depth}，V${-height-depth}L${width}，${-height}Z`）；
}
const svg=d3.select（'svg'）；
添加3dbar（svg，30150，30100，10500）；
添加3DBAR（svg，70，150，30，70，10，1000）；
添加3DBAR（svg，110、150、30、120、10、1500）