Question

有些事情我不清楚d3.js中的数据绑定。

我已经设置了一个简单的示例（可以找到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")时才有效。为什么？如果新绑定中的数据少于前一个数据，该怎么办？

提前感谢您的解释！

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（＆＃34; text＆＃34;）将根据需要创建新元素。在这种情况下，数组 data0 和 data1 都具有相同数量的元素，因此不需要新的文本元素d3只会更新值。因此不需要 .enter（）。append（＆＃34; text＆＃34;）

  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 添加以下行，这将删除旧元素（如果新绑定中的数据较少）

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

我建议您参考以下示例以更清楚地了解该过程： https://bl.ocks.org/mbostock/3808218

d3.js更新数据绑定

1 个答案: