score:2

Accepted answer
  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") will create new elements as needed. Here in this case both arrays data0 and data1 have same number of elements so there is no need of new text elements d3 will just update the values. Hence no need of .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;});

You should add the following line in draw1() for exit which will remove old elements(if there is less data in new binding)

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

I recommend you to refer the following example for understanding the process more clearly: https://bl.ocks.org/mbostock/3808218


Related Query