使用D3.js创建独特的DOM元素并更新它们，但不会再追加它们

Question

只有在此table尚不存在的情况下，我如何在table和D3.js之间追加table？

E.g.我想附加几个表到DIV，所以如果tableid='table1'已被追加，如果它再次出现在我的列表更新，我希望它被更新，但不会再次作为第二个table附加。

我要做迄今：

var tableDiv = d3.select('#tablesContainer').append('table').attr('id', 'table1');

然而，在情况下，我尝试添加第二台具有相同id，id=table1，它会创建一个新的DOM元素与相同id。

任何帮助是非常apreciated。

Answer 1

已更新现有的DOM元素，你要选择，然后操纵它们像这样：

var table = d3.select('#tablesContainer').select('#table1');

，做一些表，例如

table.style("backgroundColor", "grey");

您使用的是append，在那里你应该使用select。

如果您是基于数据创建表计划，使用update Selection：

var tables = d3.select('#tablesContainer').data(data).style("backgroundColor", "grey");

输入和更新在两行代码：

d3.select('#tablesContainer').data(data); tables.enter().append("table").merge(tables).style("backgroundColor", "grey");