Javascript D3.js进入-退出更新模式实现

背景：

我正在做一个测试项目来探索THREE.js中的有向图，我有一个不是DOM的数据结构，但与它共享许多属性。也就是说，结构是分层的，我可以执行子图选择。我已经建立了一个布局引擎。现在我想让它充满活力。我的意思是，我希望能够添加/删除/更新节点，在这种情况下，节点由场景对象表示

我喜欢在D3.js中处理这个问题的方式，但是这个库似乎严重依赖于DOM中现有的数据

我检查了源代码，弄得我的头有点痛

问题:

有人知道Mike Bostock的进入、退出和更新模式是如何编码的吗？因为我想做一个玩具实现来处理我的非DOM场景

---

非常感谢。

D3的作者迈克·博斯托克发表了一篇关于D3设计的论文。它由瓦迪姆·奥吉维茨基和杰弗里·赫尔合著，并在IEEE Trans上发表。可视化与比较。图形处理。InfoVis，2011年。可以找到免费下载pdf的链接

一旦我正确理解了更新模式和实现就不难了

对于感兴趣的人：动态转换的关键是能够识别哪些数据到达、离开和停留在D3中进入、退出和更新。您可以布局到达和停留的数据，并在任何节点或其视觉表示上执行转换。例如，从表示中删除保留的元素

---

在我的例子中，我需要计算新根节点的祖先和上一个根节点的祖先之间的图形互补和交点。

D3很简单，如果您了解一些基础知识的话。 以下是一些对你有帮助的基础知识

选择是D3的核心概念 选择页面的主体 附加容器元素 对于数据集的每个元素，附加一个可视元素 它是干什么的

加载、绑定、转换、转换 d3–引用d3对象 select–它将返回对DOM中匹配的第一个元素的引用 selectAll–多个元素 append–创建新DOM并将其附加到其所处理的选择的末尾

---

我不认为你能理解来源。您还需要一些东西来存储附加到每个元素的数据。在D3中，这是直接在DOM中完成的，但是你也可以有一个映射或类似的东西，它为你提供每个元素的数据。是的，我认为源代码将是一种方式。我想我希望迈克使用了一种我不知道的众所周知的设计模式，并且可以继续阅读。谢谢你的回复。从“图书馆用户”的角度来看，我对D3很满意。我想了解图书馆是如何编码的。在我的例子中，选择是基于图形结构化数据实现的，而不是用于在D3中构建场景图的“收集”数据。我的数据不存在于DOM中，我也不想将其推送到DOM中，因为在我的例子中，这是一个不必要的转换。这主要是因为我没有使用SVG或HTML来呈现可视化效果，而是使用Three.js定制3D布局。我只是想要一个进入/退出/更新模式的自定义实现。我还考虑使用Three.js创建自定义布局。目前我只使用WebGLRenderer。在D3中，许多数据结构正在发挥作用。例如：Voronoi、Quadtree、Delaunay等，请告诉我您的想法和意见。目前，我正在尝试构建分区布局的3D版本，但成功率有限。只是尝试一些有向图的可视化。你提到的结构没有那么复杂-我不得不用谷歌搜索“四叉树”：