Javascript 数据更新时未更新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>

我希望DOM是

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

---

任何帮助都将不胜感激

问题在于您没有处理更新选择，只有输入和退出选择。对于更新选择，再次设置相关属性：

bars.style("width", function (d) {
    return (d.vote*10) + "px";
  })
  .text(function(d) { return d.vote });

---

您没有处理更新选择--

bar.text（函数（d）{return d.vote}）@Larskothoff你能详细解释一下吗？我必须根据更新后的数据更改条的宽度和标签。正如我所说的——处理更新选择。您需要运行添加元素时运行的代码，因此要更改宽度，请执行
.style（“width”，function（d）{return（d.vote*10）+“px”；}）
@larskothoff非常感谢！我是因为你的评论才弄明白的。你能把它贴出来作为我的答案吗？解决方案是像你说的那样处理更新选择中的条<代码>条。选择全部（“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()
  };

bars.style("width", function (d) {
    return (d.vote*10) + "px";
  })
  .text(function(d) { return d.vote });