[英]Drawing an HTML table via D3 doesn't update existing data
我正在使用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);
请参考数据连接的很酷的解释。
你打电话的时候
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在两个硬编码数据集之间打开定时器)。
如果enter()
不为空,则rows
变量将是一个仅包含节点的选择。 第二次,如果你没有在backgroundJobs
添加任何新行,数据绑定将更新现有节点,而enter()
将不包含任何节点(意味着rows
不包含任何节点)。
您可以通过保留对更新选择的引用来利用这一事实来解决这个问题,即附加到输入选择的节点会添加到幕后更新选择中:
var rows = tbody.selectAll("tr")
.data(backgroundJobs, function(d) {
return d.name;
});
rows.enter()
.append("tr");
现在,行将引用包含所有先前存在和新添加的节点的选择。
为了能够动态添加和删除行,此策略适用于我:
// ROW MANAGEMENT
// select all tr elements
var tr = this.table.select("tbody").selectAll("tr").data(cur_data);
// exit rows
tr.exit().remove();
// enter rows
var trEnter = tr.enter().append("tr");
// CELL MANAGEMENT
trEnter.selectAll("td").data(function(d) { return d3.values(d); }).enter().append("td").text(function(d) { return d; });
// select all td elements
var td = tr.selectAll("td").data(function(d) { return d3.values(d); });
// exit cells
td.exit().remove();
// enter and update/add data to cells
td.enter().append("td");
td.text(function(d) { return d; });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.