1

背景：

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

我喜欢在 D3.js 中处理这种情况的方式，但是该库似乎严重依赖于 DOM 中存在的数据（？）

我检查了源代码，让我有点头疼。

问题：

有谁知道 Mike Bostock 的进入、退出、更新模式是如何编码的，因为我想制作一个玩具实现来处理我的（非 DOM）场景。

提前谢谢了。

4

2 回答 2

0

D3 的作者 Mike Bostock 发表了一篇关于 D3 设计的论文。它由 Vadim Ogievetsky 和 ​​Jeffrey Heer 合着，发表在 IEEE Trans. 可视化与比较 Graphics (Proc. InfoVis)，2011。可在此处找到可免费下载的 pdf 的链接。

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

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

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

于 2014-07-22T19:19:12.337 回答
0

如果您了解一些基础知识，D3 就很简单。这里有一些对你有帮助的基础知识。

  • 选择是 D3 中的核心概念
  • 选择页面正文
  • 附加一个容器元素
  • 对于数据集的每个元素，附加一个可视元素

它能做什么？

  • 加载、绑定、转换、过渡
  • d3 – 引用 D3 对象
  • select() – 它将返回对 DOM 中匹配的第一个元素的引用
  • selectAll() – 多个元素
  • append() - 创建新的 DOM 并将其附加到它所作用的选择的末尾
于 2014-07-26T11:34:47.660 回答