d3模式,如果缺少则添加元素

Question

有了D3,我发现自己做了很多这样的事情:

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

我想简单地添加一个节点(如果它还不存在),因为我需要在DOM树中的不同位置进行更新,而且我方便的数据并不完全与DOM平行.

这是一个标志,我应该重新构建我的数据,以便它是平行的,还是有一个不那么愚蠢的模式,人们用这种"创造如果失踪"的东西？

Answer 1

D3实现了DB世界中众所周知的JOIN + INSERT/UPDATE/DELETE模式.在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要求,您可以编写非常易于维护的代码.如果您尝试使用此模式之外的hack,您的UI代码很快就会让您感到非常伤心.您应该预处理数据以满足UI的需要.

D3为某些用例提供了一些预处理器.例如,树形图布局功能将分层数据集展平为列表treemap.nodes,然后您可以将其用作基于列表的简单数据集,以便为每个元素绘制矩形.树形图布局还会x,y,width,height为您计算所有值.您只需绘制rects而不再关心层次结构.

以同样的方式,你可以开发自己的帮助函数

1. 将您的数据转换为更好的消耗品格式
2. 尝试用UI的"提示"来丰富数据,如何绘制它

这些"提示"可能包括几何值,标签文本,颜色,以及基本上无法通过查看单个数据元素(例如树形图几何体)得出的所有内容,并且需要您将每个元素与某些/所有相关联其他元素(例如,确定树中节点的嵌套深度).在一个预处理步骤中执行此类任务可以为该任务编写更清晰,更快速的代码,并将数据处理与UI绘图分开.