Question

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

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

任何帮助将不胜感激！

Answer 1

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

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

数据更新时，d3js元素未更新

1 个答案: