数据更新时d3js元素未更新

根据该文档，如果数据已更新，则集合应自行更新。例如，我在数组中有两个元素：

[{name: "Tom", age:10}, {name: "Prank", age:12}]

并且此数据已经加入到以下DOM元素中

<div class="container">
  <div class="el">Tom is 10 yrs old</div>
  <div class="el">Prank is 12 yrs old</div>
</div>

并更新数据。

[{name: "Tom", age:20}, {name: "Prank", age:22}]

我希望DOM是

<div class="container">
  <div class="el">Tom is 20 yrs old</div>
  <div class="el">Prank is 22 yrs old</div>
</div>

但是由于元素的数量和数据的大小相同，因此div元素似乎没有更新。我在这里想念什么吗？上面的示例是下面代码的简化版本，但是我相信了解如何正确更新上面的示例将解决此问题。

  function draw(data) {
    var bars = d3.select(".container")
      .selectAll(".bar-wrapper")
      .data(data);
    var barEnter = bars
      .enter()
      .append("div")
      .attr("class", "bar-wrapper")
    barEnter
      .append("button")
      .text(function(d) { return "Vote "+ d.name; })
      .attr("class", "vote-btn btn-default btn-primary")
      .on("click", function(d) {
        console.log("send Data", d.name);
        sendData(d.name);
      });
    barEnter
      .append("div")
      .attr("class", "bar")
      .style("width", function (d) {
        return (d.vote*10) + "px";
      })
      .text(function(d) { return d.vote });
    bars
      .exit()
      .remove()
  };

任何帮助将不胜感激！