Question

我正在玩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);

Answer 1

如果您将更新选择处理中的.selectAll()更改为.select()，则此方法有效：

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

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

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

您使用的一般模式是nested selection，可能会让您感到有些困惑并导致意外结果。

为什么我的更新数据没有重新渲染？

1 个答案: