我正在使用 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);
最佳答案
请引用data joins的酷解.
当你打电话时
tbody.selectAll("tr").data(some-new-data);
您实际上有 3 个选择:'enter'(新元素尚未出现在 DOM 中)、'exit'(那些出现在 DOM 中但不再出现在数据中的元素)和'update',其中包含的节点是已经在 DOM 中,并且仍然有通过上面的 .data 调用分配给它们的数据。
一般来说,对于“进入”选择,您创建新节点,对于“退出”,您需要删除旧节点,对于“更新”,您只需更改属性 - 可能会有一些不错的过渡效果。 请参阅更新的“滴答”功能代码。
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();
}
参见 Demo (backgroundJobs 在两个硬编码数据集之间打开计时器)。
关于javascript - 通过 D3 绘制 HTML 表格不会更新现有数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18022527/