为什么我的更新数据不能重新渲染？

问题描述：

我在玩D3.js中的“更新”模式。我只是创建一个简单的条形图，当您按下“更改”按钮时将更新数据。为什么我的更新数据不能重新渲染？

我的问题是，当你按下“更改”按钮，前三呈现酒吧不要再渲染。我调试并看到数据正确应用（__data__是正确的），但重新申请失败。

这里是我的代码，并在CodePen一个链接：

var myData = [ 100, 200, 300 ]; 

d3.select('body').append('button').text("Change").on("click", function() { 
    myData = [200, 400, 600, 700, 800, 900, 1000]; 
    update(myData); 
}); 

var svg = d3.select('body').append('svg') 
    .attr("class", "chart") 
    .attr("y", 30); 

var update = function(data) { 
    var bars = svg.selectAll('g') 
    .data(data); 

    var groups = bars.enter() 
    .append("g") 
    .attr("transform", function(d,i) {return "translate(0," + i*25 + ")"}); 

    groups 
    .append("rect") 
    .attr("height", 25) 
    .attr("fill", "pink") 
    .attr("stroke", "white"); 

    groups 
    .append("text") 
    .attr("x", 10) 
    .attr("y", 18) 
    .attr("fill", "red"); 

    bars.selectAll("rect") 
    .attr("width", String); 

    bars.selectAll("text") 
    .text(String); 
}; 

update(myData);

答

如果您在更新的选择改变.selectAll()处理，以.select()它的工作原理：

bars.select("rect") 
    .attr("width", String); 

bars.select("text") 
    .text(String);

使用selectAll()，你重新访问绑定到您选择的元素（即矩形和文本元素）的数据，这些数据在附加元素时被绑定。此数据尚未更新，因为您只更新了包含g元素的数据。而使用.select()也会将新数据绑定到子元素。

您使用的一般模式是nested selection，可以是一个有点混乱下手，并导致意想不到的结果。

为什么我的更新数据不能重新渲染？

相关推荐