D3.js输入退出更新模式实现

时间:2014-07-22 10:28:57

标签: javascript design-patterns d3.js directed-graph digraphs

背景:

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

我喜欢在D3.js中处理它的方式,但是库似乎严重依赖于DOM中存在的数据(?)

我检查了源代码,让我头疼了一点。

问题:

有谁知道Mike Bostock的输入,退出,更新模式是如何编码的,因为我想制作一个可以处理我的(非DOM)场景的玩具实现。

非常感谢提前。

2 个答案:

答案 0 :(得分:0)

D3的作者Mike Bostock发表了一篇关于D3设计的论文。它由Vadim Ogievetsky和Jeffrey Heer共同撰写并发表在IEEE Trans。可视化与比较。图形(Proc.InfoVis),2011。可以找到免费下载pdf的链接here

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

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

在我的实例中,我需要计算新根节点的祖先和我以前的根节点的祖先之间的图形赞美和交叉。

答案 1 :(得分:0)

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

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

它做什么?

  • 加载,绑定,转换,转换
  • d3 - 引用D3对象
  • select() - 它将返回对DOM中与
  • 匹配的第一个元素的引用
  • selectAll() - 多个元素
  • append() - 创建新DOM并将其附加到它正在
  • 上执行的选择的末尾