通过D3绘制HTML表不会更新现有数据 [英] Drawing an HTML table via D3 doesn't update existing data

问题描述

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

I'm using D3 to draw an HTML table, and things work great on enter. When I add a new item to my data collection, it adds the new item to the table correctly.

问题是每当我更新现有对象（在该集合中的backgroundJobs集合。当我重新运行D3代码以同步表时，它不起作用。什么都没发生。

The problem is whenever I update an existing object (an object in the backgroundJobs collection below) within the collection. When I re-run the D3 code to sync up the table, it does not work. Nothing happens.

这是代码：

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);

推荐答案

请参考数据加入。

当您致电

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

您实际上有3个选择：'enter'（尚未在DOM中出现新元素） ，'exit'（存在于DOM中但不再存在于数据中的那些）和'update'，其中包含已经存在于DOM中的节点，并且仍然通过上面的.data调用将数据分配给它们。

You actually get 3 selections: 'enter' (whith the new elements not present in the DOM yet), 'exit' (those present in DOM but not longer present in the data) and 'update' which contains nodes that are already in DOM and still have the data assigned to them via the .data call above.

一般来说，对于'enter'选择你创建新节点，'exit'你需要删除旧节点，而'update'你只需要改变属性 - 可能有一些很好的转换影响。
请参阅更新后的'tick'功能代码。

In general, for 'enter' selection you create new nodes, for 'exit' you need to remove the old ones, and for 'update' you just change attributes - may be with some nice transition effect. See the updated 'tick' function code.

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在两个硬编码数据集之间打开计时器。）

See the Demo (backgroundJobs is switched on timer between the two hard-coded datasets).

这篇关于通过D3绘制HTML表不会更新现有数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！