基本d3js数据更新

Question

请看下面的fiddle。 当您单击按钮时，它会更新数据。我没有得到的一件事是在draw（）函数中做bar.exit().remove()的目的。

function draw(data) { 
    var scale = d3.scale.linear() 
     .domain([0, 50]) 
     .range([0, 100]); 

    var bars = d3.select("#work_queues_chart") 
     .selectAll("div") 
     .attr("id","work_queues_chart") 
     .data(data); 

    // enter selection 
    bars 
     .enter().append("div"); 

    // update selection 
    bars 
     .style("width", function (d) {return scale(d) + "%";}) 
     .text(function (d) {return d;}); 

    // exit selection 
    bars 
     .exit().remove(); 
}; 

它是否删除在输入新数据之前存在的旧数据？如果是这样，不应该在setting bars.data(data)之前调用？任何启发将不胜感激！

更新：

function draw(data) { 
     var bars = d3.select("body") 
      .selectAll("div") 
      .data(data); 
     var charts = bars 
      .enter().append("div") 
      .attr("class", "bar") 
     charts 
      .selectAll("button") 
      .append("button") 
      .text(function (d) { 
      console.log(d) 
      return d.name; }) 
      .attr("class", "my-button") 
     bars 
      .style("width", function (d) {return d.val*10 + "px";}) 
      .text(function (d) { 
      return d.name; }); 
     bars 
      .exit().remove(); 
    }; 

我得到了更新部分的工作，但现在的按钮无法正常追加。我如何追加按钮有什么问题吗？

Answer 1

在你的情况下，bars.exit().remove()什么都不做。但是，如果更新的数据是少于6个元素的数组，例如4个元素，则bars.exit()将返回没有相应数据的2个DOM节点的选择，并且.remove()将删除它们。在这种情况下，你想要什么。