更新數據時未更新d3js元素

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