Как обновить таблицу d3?

Question

У меня есть проблема с обновлением моей таблицы d3.js при mousemoving. Вот упрощенная example в jsfiddle.

Вот основной код:

function mousemove() { 

    var newdata = [{Variable: "x", Value: 1}, {Variable: "y", Value: 1}] 

    table.selectAll("tbody.tr") 
    .data(newdata) 
    .enter() 
    .append("tr") 
    .selectAll("td") 
    .data(function(row) { 
     return columns.map(function(column) { 
     return {column: column, value: row[column]}; 
     }); 
    }) 
    .enter() 
    .append("td") 
    .text(function(d) { return d.value; }); 
}; 

а именно, как я могу только обновить значения в таблице, а не снова и снова рисуя новую таблицу?

Спасибо!

Answer 1

Используйте ранее определенные выборы (в jsfiddle примере)

var table = d3.select("body").append("table"); 
var tbody = table.append("tbody"); 

Используя этот выбор, вы можете обновить существующую таблицу. В вашей функции mouseover() вы использовали функцию enter() в качестве попытки обновить таблицу. Но поскольку enter() видит, что необходимое количество заполнителей (2 заполнителя для 2 строк) уже присутствует, ничего не будет сделано. Вы можете обновить путем удаления ввода() и добавить заявления и делать что-то вроде:

tbody.selectAll("tr") 
    .data(newdata) 
    .selectAll("td") 
    .data(function(row) { 
    return columns.map(function(column) { 
     return { 
     column: column, 
     value: row[column] 
     }; 
    }); 
    }) 
    .text(function(d) {return d.value;}); 

В идеале вы должны следовать ввода(), обновление() и выход() последовательность для таких d3 обновлений, но в этой ситуации просто указанных выше изменений будет достаточно.

Answer 2

Существует отличный учебник по шаблону обновления по адресу http://bl.ocks.org/mbostock/3808218.

Как правило, для обновлений У вас должен быть ключ для объединения данных, переданный как второй параметр в .data (значения, ключ).

Я обновил ваш jsfiddle с помощью ввода, обновлять, удалять шаблон для справки:

var rows = table.selectAll("tbody tr") 
.data(newdata, function (d) {return d.Variable;}); 

rows.enter() 
.append('tr') 
.selectAll("td") 
.data(function (d) {return [d.Variable, d.Value];}) 
.enter() 
.append("td") 
.text(function(d) { return d; }); 

rows.exit().remove(); 

var cells = rows.selectAll('td') 
.data(function (d) {return [d.Variable, d.Value];}) 
.text(function (d) {return d;}); 

cells.enter() 
.append("td") 
.text(function(d) { return d; }); 

cells.exit().remove(); 

https://jsfiddle.net/qL7knnkv/