通过D3绘制HTML表不会更新现有数据

Question

我正在使用D3绘制一个HTML表格,并且在输入时工作得很好.当我向数据集合添加新项目时,它会正确地将新项目添加到表中.

问题是每当我更新集合中的现有对象(下面的backgroundJobs集合中的对象)时.当我重新运行D3代码以同步表时,它不起作用.什么都没发生.

这是代码:

var visibleColumns = ['Name', 'Start', 'End', 'Status', 'Metadata', 'Errors'];

var table = d3.select('#jobs').append('table');
var thead = table.append('thead');
var tbody = table.append('tbody');

thead.append("tr")
    .selectAll("th")
    .data(visibleColumns)
    .enter()
    .append("th")
    .text(function (column) { return column; });

function tick() {
    var rows = tbody.selectAll("tr")
        .data(backgroundJobs, function(d) {
            return d.name;
        })
        .enter()
        .append("tr");

    var cells = rows.selectAll("td")
        .data(function(row) {
            return [{column: 'Name', value: row.name},
                    {column: 'Start', value: row.startedTimestamp},
                    {column: 'End', value: row.endedTimestamp},
                    {column: 'Status', value: row.isRunning},
                    {column: 'Metadata', value: ''},
                    {column: 'Errors', value: row.errorMsg}];
        })
       .enter()
        .append("td")
        .text(function(d) { return d.value; });
}

setInterval(tick, 500);

Answer 1

请参考数据连接的很酷的解释.

你打电话的时候

tbody.selectAll("tr").data(some-new-data);

实际上你得到了3个选择:'enter'(尚未在DOM中出现新元素),'exit'(存在于DOM中但不再存在于数据中的那些元素)和'update',其中包含已经存在于DOM中的节点并且仍然通过上面的.data调用分配给他们的数据.

一般来说,对于"输入"选择,您需要创建新节点,"退出"需要删除旧节点,而"更新"只需更改属性 - 可能会有一些很好的过渡效果.请参阅更新的"tick"功能代码.

function tick() {
    var rows = tbody.selectAll("tr")
    .data(backgroundJobs, function(d) {
        return d.name;
    });

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

    rows.order();

    var cells = rows.selectAll("td")
        .data(function(row) {
            return [{column: 'Name', value: row.name},
                {column: 'Start', value: row.startedTimestamp},
                {column: 'End', value: row.endedTimestamp},
                {column: 'Status', value: row.isRunning},
                {column: 'Metadata', value: ''},
                {column: 'Errors', value: row.errorMsg}];
        });

    cells.enter()
        .append("td");

    cells.text(function(d) { return d.value;});

    cells.exit().remove();

    rows.exit().remove();
}

参见演示(backgroundJobs在两个硬编码数据集之间打开定时器).