d3模式添加一个元素，如果缺失 [英] d3 pattern to add an element if missing
问题描述
使用D3，我发现自己在做这个很多：
With D3, I'm finding myself doing this a lot:
selectAll('foo').data(['foo']).enter().append('foo')
只要添加一个节点，如果它不存在，因为我需要在DOM树中的不同地方做更新，我方便的数据不完全平行于DOM。
I'd like to simply add a node if it doesn't already exist, because I need to do updates at different places in the DOM tree, and the data I have handy isn't exactly parallel to the DOM.
这是一个迹象，我应该重新编写我的数据，使它是平行的，或者有一个不太蠢的模式，人们使用这种创造如果丢失的东西？
Is this a sign that I should reformulate my data so that it is parallel, or is there a less silly pattern that folks use for this kind of 'create if missing' thing?
推荐答案
D3实现了从DB世界中熟知的JOIN + INSERT / UPDATE / DELETE模式。在d3中，您首先选择一些DOM元素，然后将其与数据连接：
D3 implements a JOIN + INSERT/UPDATE/DELETE pattern well known from the DB world. In d3 you first select some DOM elements and then join it with the data:
//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的需要。
You see, if you have data that nicely fits your UI requirements you can write very maintainable code. If you try hacks outside this pattern, your UI code will make you very sad soon. You should preprocess your data to fit the needs of the UI.
D3为某些用例提供了一些预处理器。例如， treemap 布局功能将分层数据集平铺到列表 treemap.nodes ，然后您可以使用基于列表的简单数据集来为每个元素绘制一个矩形。 treemap布局还为您计算所有 x，y，width，height 值。
D3 provides some preprocessors for some use cases. For example the treemap layout function flattens a hierarchical data set to a list treemap.nodes, which you can then use as simple list-based data set to draw a rectangle for each element. The treemap layout also computes all x,y,width,height values for you. You just draw the rects and do not care about the hierarchy anymore.
以同样的方式，您可以开发自己的辅助函数到
In the same way you can develop your own helper functions to
- 将您的数据转换为更好的耗材格式，
- 尝试使用hints为UI丰富数据，
这些提示可能包括几何值，标签文本，颜色，以及基本上无法直接从单个视图数据元素（例如树形图几何），并且要求您将每个元素与一些/所有其他元素相关（例如，确定树中的节点的嵌套深度）。在一个预处理步骤中执行这样的任务允许您为该任务编写更干净，更快的代码，并将数据处理与UI的绘图分开。
These "hints" may comprise geometry values, label texts, colors, and basically everything that you cannot directly derive from looking at a single data element (such as the treemap geometry), and that would require you to correlate each element with some/all other elements (e.g., determining the nesting depth of a node in a tree). Doing such a tasks in one preprocessing step allows you write cleaner and faster code for that task and separates the data processing from the drawing of the UI.
这篇关于d3模式添加一个元素，如果缺失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
