D3.js d3模式，以在缺少元素时添加元素

对于D3，我发现自己经常这样做：

selectAll('foo').data(['foo']).enter().append('foo')

如果节点不存在，我只想添加一个节点，因为我需要在DOM树中的不同位置进行更新，而且我手头的数据与DOM并不完全平行

---

这是我应该重新格式化数据以使其并行的标志，还是人们在这种“缺少时创建”的事情上使用了一种不那么愚蠢的模式？

D3实现了一种数据库世界中广为人知的连接+插入/更新/删除模式。在d3中，首先选择一些DOM元素，然后将其与数据连接：

//join existing 'g.class' DOM elements with `data` elements
var join = d3.select('g.class').data(data)   

//get the join pairs that did not have 'g.class' join partner and
//INSERT new 'g.class' DOM elements into the "empty slots"
join.enter().append('g').attr('class', 'class')

//get the join pairs that did not have a `data` element as join partner and
//DELETE the existing 'g.class' DOM elements
join.exit().remove()

//get the join pairs that have a `data` element join partner and
//UPDATE the 'g.class' DOM elements
join.attr("name","value")

你看，如果你有数据很好地符合你的UI需求，你可以编写非常可维护的代码。如果你尝试这种模式之外的黑客攻击，你的UI代码很快就会让你非常难过。您应该预处理数据以满足UI的需要

D3为一些用例提供了一些预处理器。例如，布局函数将分层数据集展平为列表

树映射节点

，然后可以将其用作简单的基于列表的数据集，为每个元素绘制一个矩形。树形图布局还为您计算所有

x、y、宽度、高度
值。您只需绘制矩形，不再关心层次结构

同样，您可以开发自己的助手函数来

将数据转换为更好的可消费格式，并
尝试用UI的“提示”来丰富数据，如何绘制它
这些“提示”可能包括几何值、标签文本、颜色，以及基本上无法通过查看单个数据元素（如treemap几何）直接获得的所有内容，这些内容要求您将每个元素与一些/所有其他元素关联起来（例如，确定树中节点的嵌套深度）。在一个预处理步骤中执行这样的任务可以让您为该任务编写更干净、更快的代码，并将数据处理从UI的绘图中分离出来。
您能否提供代码，说明如何构建您正在进行的选择？考虑到您所写的内容，您正在做的就是您需要做的。好吧，即使选择是空文档上的select（“正文”）。是的，但正如我在一般情况下指出的，您所做的就是您所能做的。如果你正在处理的选择有什么特别的地方，那可能不是这样。哦，不，没有特别的。我在过去一天左右的经验促使我选择前一种方法，即只需使数据更加并行。是的，谢谢，我也想到了将“数据映射”步骤与“渲染”步骤分开的建议。在您的代码中，看起来您需要这样做：
var join=d3.select（'g.class'）。data（data）