javascript - d3.js 更新数据绑定(bind)

Question

关于 d3.js 中的数据绑定(bind)，有些事情我不太清楚。

我设置了一个简单的示例(可以在 here 中找到)，其中显示 4 个数字:

var data0 = [1, 2, 3, 4];
var data1 = [5, 6, 7,8];
var data2 = [10, 11,12];

var lgth = 100;
var wdth = 50;
var position = [[0,0],[0,wdth], [lgth,0],[lgth,wdth]];

var svg = d3.select("#test").append("svg")
            .attr("width", wdth+100)
            .attr("height", lgth+100);

svg.selectAll("text").data(data0)
      .enter().append("text")
      .text(function(d){return d;})
      .attr("x",function(d,i){return position[i][0]+30;})
      .attr("y",function(d,i){return position[i][1]+30;});

但是，当我尝试使用该函数更新这 4 个数字时:

function draw1(){
svg.selectAll("text").data(data1)
      //.enter().append("text") /* if not commented does nothing*/
      .text(function(d){return d;})
      .attr("x",function(d,i){return position[i][0]+30;})
      .attr("y",function(d,i){return position[i][1]+30;});
}

它仅在 .enter().append("text") 被注释时起作用。为什么 ？如果新绑定(bind)中的数据少于前一个绑定(bind)中的数据怎么办？

非常感谢您的解释!

Answer 1

  svg.selectAll("text").data(data0)
  .enter().append("text")
  .text(function(d){return d;})
  .attr("x",function(d,i){return position[i][0]+30;})
  .attr("y",function(d,i){return position[i][1]+30;});

.enter().append("text") 将根据需要创建新元素。在这种情况下，数组 data0 和 data1 都具有相同数量的元素，因此不需要新的文本元素 d3 只会更新值。因此不需要 .enter().append("text")

  svg.selectAll("text").data(data1)
  .text(function(d){return d;})
  .attr("x",function(d,i){return position[i][0]+30;})
  .attr("y",function(d,i){return position[i][1]+30;});

您应该在 draw1() 中为 exit 添加以下行，这将删除旧元素(如果新绑定(bind)中的数据较少)

svg.selectAll("text").exit().remove()

我建议您引用以下示例，以便更清楚地理解该过程: https://bl.ocks.org/mbostock/3808218