如何让条形图从下到上开始抖动？

<div id="chart"></div>

.bar {
  fill: steelblue;
  animation: shake 1s infinite;
}

@keyframes shake {
  0% { transform: translate(0, 0); }
  50% { transform: translate(0, -10px); }
  100% { transform: translate(0, 0); }
}

// 创建数据
var data = [10, 20, 30, 40, 50];

// 创建SVG容器
var svg = d3.select("#chart")
  .append("svg")
  .attr("width", 400)
  .attr("height", 200);

// 创建条形图
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("class", "bar")
  .attr("x", function(d, i) {
    return i * 50 + 50;
  })
  .attr("y", 200)
  .attr("width", 40)
  .attr("height", function(d) {
    return d;
  });