更新数据时未更新d3js元素答案

【问题标题】：d3js elements not updated when data is updated更新数据时未更新d3js元素
【发布时间】：2014-11-03 15:40:12
【问题描述】：

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

[{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()
  };

任何帮助将不胜感激！

【问题讨论】：

你没有处理更新选择 -- bars.text(function(d) { return d.vote });
@LarsKotthoff 你能详细说明一下吗？我必须根据更新的数据更改条形的宽度和标签。
正如我所说的——处理更新选择。您需要运行添加元素时运行的代码，因此要更改宽度，请执行.style("width", function (d) { return (d.vote*10) + "px"; })。
@LarsKotthoff 非常感谢！因为你的评论，我才知道。您能否将其发布为答案，以便我接受？解决方案是像你说的那样处理更新选择中的栏。 bars.selectAll("div").text(function ...

标签： javascript d3.js

【解决方案1】：

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

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

【讨论】：