基本d3js數據更新

請看下面的fiddle。當您單擊按鈕時，它會更新數據。我沒有得到的一件事是在draw（）函數中做bar.exit().remove()的目的。基本d3js數據更新

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

我得到了更新部分的工作，但現在的按鈕無法正常追加。我如何追加按鈕有什麼問題嗎？

來源

2014-10-30 Maximus S

在你的情況下，bars.exit().remove()什麼都不做。但是，如果更新的數據是少於6個元素的數組，例如4個元素，則bars.exit()將返回沒有相應數據的2個DOM節點的選擇，並且.remove()將刪除它們。在這種情況下，你想要什麼。

來源

2014-10-30 22:42:52 meetamit

這很有道理！那我該如何更新現有數組的值呢？比方說，最初的數組有[1,2,3,4,5]，我希望它有[4,4,4,4,4]並繪製它。 – 2014-10-31 15:29:44

你已經有這個工作，不是嗎？這是由您標記'/ /更新選擇' – meetamit 2014-10-31 16:29:43

您可以看看我更新的代碼，看看我做錯了每個條形圖的追加按鈕元素的塊嗎？ – 2014-10-31 16:38:19

基本d3js數據更新

回答

相關問題