Многократное обновление таблицы с помощью D3 не работает

Question

У меня есть страница, на которой нужно загрузить новые данные и обновить их до существующего элемента таблицы с помощью d3. Я пишу следующее, но не работает:

  // completeTableData = [ {head1:va1, head2: val2}, {haed1: val4, head2: val5}, ... ]
  var tr = d3.select("tbody")
    .selectAll("tr")
    .data(completeTableData);   
  tr.exit().remove();                       // remove the previous data in the table
  tr.merge(tr.enter().append("tr"));

  var td = tr.selectAll("td")
    td.data(function(d, i) { 
      return Object.values(d);
    });  
  td.exit().remove();
  td.merge(td.enter().append("td"));

Похоже, tr обновляется правильно, но td всегда отражает предыдущие данные и не обновлялся.

Answer 1

Выборки в D3 неизменяемы . Следовательно, это:

tr.merge(tr.enter().append("tr"));

... не изменит, что такое tr. Поскольку вы, очевидно, хотите, чтобы это был выбор «обновление + ввод», вам необходимо переназначить его:

tr = tr.merge(tr.enter().append("tr"));

Наконец, я бы посоветовал назвать выборку ввода, чтобы все это было:

var trEnter = tr.enter().append("tr");
tr = tr.merge(trEnter);