Protovis vs D3.js

时间:2011-06-02 08:22:27

标签: javascript protovis d3.js

TLDR:有没有人有protovis和amp;的经验D3.js阐明了两者之间的差异?

过去两周我一直在玩protovis,到目前为止一直很棒。除了现在我似乎已经用动画打了一个砖墙。

protovis:http://vis.stanford.edu/protovis/

我想做一些非常简单的动画但是使用protovis感觉不那么直观 - 我开始认为protovis从来就不是真的用于动画。所以,我开始关注D3.js:

http://mbostock.github.com/d3/ex/stack.html

看起来非常相似,但是:

  • 似乎更轻量级
  • 似乎是为了与其他DOM元素以及SVG进行交互
  • 似乎是为了添加动画

任何人都可以阐明其他任何差异吗?

我非常感谢任何和所有的输入

3 个答案:

答案 0 :(得分:115)

我在Protovis和D3的一些事情上做了相当多的工作。除了你提到的要点之外,我认为以下差异对我来说很突出:

  • 在Protovis在您指定的视觉属性之间提供简化的抽象层的情况下,D3使用实际的CSS和DOM规范 - 而不是.width(10).fillStyle('#00C')您使用{ {1}}或.style('width', 10)。在这些示例中,差异非常小,但是当您在SVG图像中绘制线条时,会有很大差异。结果是使用D3可以感觉到更低级别 - 你有更多的控制权,但你必须非常熟悉SVG语法才能更容易地做一些Protovis做的事情。

  • 正如您所知,Protovis全部以SVG呈现,而D3可以使用DOM的其他部分。这意味着,对于不需要基于SVG的可视元素的可视化,即使使用不支持SVG的浏览器,也可以使用D3。这也意味着在同一个可视化中集成HTML和SVG要容易得多,这对于处理文本非常好(文本操作和布局在Protovis中相当弱)。

  • D3更改或删除了一些基本的Protovis实用程序,如缩放和数据操作。我一再恼火的是.attr('fill', '#00C')pv.sum()这样的基本实用程序没有D3等价物,但有些像pv.mean()这样的库在两个库之间共享。 编辑10/1/12: D3填写了其数据实用程序,但仍有一些Protovis包含但D3没有,例如.nest()pv.dictpv.numerate。据推测,他们被排除在外,因为他们被认为不太有用。

  • D3为异步请求提供实用程序。当我想要在Protovis中使用它时,我通常必须使用外部库(即jQuery)。

  • 与Protovis非常详细的文档相比,D3 API文档几乎完全缺少不完整。 编辑(2013年8月30日):D3现在有complete and detailed API documentation on GitHub,因此这一点已不再相关。

  • 最后,我对动画没有做太多,但我认为你完全正确 - D3提供了比Protovis更多的动画支持,特别是在动画过渡方面。 Protovis可以根据需要重新呈现部分或全部可视化,但是没有任何支持来逐步执行有限持续时间的动画 - 您必须手动编写pv.repeat代码。 D3似乎使这成为图书馆不可或缺的一部分。

编辑(7/12/11):看起来有一个新的主要区别 - 截至2011年6月28日,Protovis不再处于积极发展阶段,Protovis团队正在推动D3 .js而不是。最后一个版本非常稳定,所以这不应该阻止你使用它,但这绝对是一个值得考虑的问题。

答案 1 :(得分:32)

有一个教程详细介绍了D3 and Protovis之间的差异。我同意@ nrabinowitz的描述,但我会指出我们最近添加了大量的API documentation

答案 2 :(得分:6)

最近有一篇来自Protovis / d3.js的作者的论文发表于2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf,主要是关于d3.js,但其中包含了为什么他们在从Protovis到d3.js的途中改变某些事情的一些原因。