javascript - Protovis 与 D3.js

Question

TLDR:有没有人同时使用过 protovis 和 D3.js 来说明两者之间的区别？

过去 2 周我一直在使用 protovis，到目前为止效果非常好。除了现在我似乎在动画方面遇到了一些障碍。

原型(prototype):http://vis.stanford.edu/protovis/

我想做一些非常简单的动画，但使用 protovis 感觉不够直观——我开始认为 protovis 从来就不是真正的动画。所以，我开始研究 D3.js:

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

看起来很像，但是:

• 看起来更轻盈
• 似乎适合与其他 DOM 元素以及 SVG 交互
• 似乎适合添加动画

谁能阐明任何其他差异？

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

Answer 1

我用 Protovis 做了很多工作，用 D3 做了一些事情。除了您提到的几点之外，我认为以下差异对我来说很突出:

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

• 正如您所注意到的，Protovis 全部以 SVG 呈现，而 D3 可以使用 DOM 的其他部分。这意味着，对于不需要基于 SVG 的视觉元素的可视化，您甚至可以在不支持 SVG 的浏览器中使用 D3。这也意味着将 HTML 和 SVG 集成到同一可视化中要容易得多，这对于处理文本之类的事情非常有用(文本操作和布局在 Protovis 中非常薄弱)。

• D3 更改或删除了一些基本的 Protovis 实用程序，例如比例和数据操作。 pv.sum() 或 pv.mean() 等基本实用程序没有 D3 等价物，尽管有一些，例如 .nest ()，在两个库之间共享。 编辑 2012 年 10 月 1 日:D3 已经填写了它的数据实用程序，但仍然有一些是 Protovis 包含而 D3 没有的，例如pv.dict、pv.numerate 和 pv.repeat。据推测，它们被排除在外是因为人们普遍认为它们用处不大。

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

• 与相当详细的 Protovis 文档相比，D3 API 文档 几乎完全缺乏 不完整。 编辑 (8/30/13):D3 现在有 complete and detailed API documentation on GitHub ，所以这一点不再相关。

• 最后，我在动画方面做的不多，但我认为您完全正确 - D3 比 Protovis 提供更多的动画支持，尤其是在动画过渡方面。 Protovis 可以根据需要重新呈现部分或全部可视化效果，但不支持逐步执行有限持续时间的动画 - 您必须使用 setInterval 手动编写所有代码。 D3 似乎使它成为库中更不可或缺的一部分。

编辑 (7/12/11):看起来有一个新的主要区别 - 截至 2011 年 6 月 28 日，Protovis 不再处于积极开发状态，Protovis 团队正在插入 D3 .js 代替。最新版本非常稳定，因此这不应妨碍您使用它，但这绝对是一个需要考虑的问题。