D3.js "growing Up" Path Animation For 3d Bar Chart

I am trying to add classic animation to pseudo-3D bar chart. It's very simple to do it right with rect. But what about path ? I have three basic paths for the 3d effect: How to ma

Solution 1:

Implemented with D3 Transition (set duration in milliseconds):

constadd3DBar = (parent, xPos, yPos, width, height, depth, duration) => {
  const g = parent.append('g').attr('transform', `translate(${xPos}, ${yPos})`);
  
  g.append('path')
   .attr('d', `M 0,0 V ${0} H ${width} V 0 H 0 Z`)
   .style('fill', '#000081')
   .transition()
   .duration(duration)
   .attr('d', `M 0,0 V ${-height} H ${width} V 0 H 0 Z`);
  
  g.append('path')
   .attr('d', `M 0,${0} L ${depth},${-depth} H ${depth + width} L ${width},0 Z`)
   .style('fill', '#0000FF')
   .transition()
   .duration(duration)
   .attr('d', `M 0,${-height} L ${depth},${-height-depth} H ${depth + width} L ${width},${-height} Z`);

  g.append('path')
   .attr('d', `M ${width},0 L ${width + depth},${-depth}, V ${-depth} L ${width},0 Z`)
   .style('fill', '#0000C0')
   .transition()
   .duration(duration)
   .attr('d', `M ${width},0 L ${width + depth},${-depth}, V ${-height-depth} L ${width},${-height} Z`);
}

const svg = d3.select('svg');

add3DBar(svg, 30, 150, 30, 100, 10, 500);
add3DBar(svg, 70, 150, 30, 70, 10, 1000);
add3DBar(svg, 110, 150, 30, 120, 10, 1500);

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script><svg></svg>