Javascript Protovis 与 D3.js

Protovis vs D3.js

提问by By Richard Powell

TLDR: Does anyone have experience of both protovis & D3.js to illuminate the differences between the two?

TLDR：有没有人同时使用 protovis 和 D3.js 来阐明两者之间的差异？

I've been playing with protovis for the last 2 weeks and it's been great so far. Except now I seem to have hit a bit of a brick wall with animation.

过去 2 周我一直在玩 protovis，到目前为止它一直很棒。除了现在，我似乎在动画方面遇到了一些砖墙。

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

原型：http://vis.stanford.edu/protovis/

I want to do some quite simple animation but with protovis it feels less than intuitive - I'm starting to think that protovis was never really meant for animation. So, I started looking at D3.js:

我想做一些非常简单的动画，但使用 protovis 感觉不太直观 - 我开始认为 protovis 从来没有真正用于动画。所以，我开始研究 D3.js：

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

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

It looks very similar, but:

它看起来非常相似，但是：

• Seems more lightweight
• Seems geared to interacting with other DOM elements as well as SVG
• Seems geared to adding animations

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

Can anyone illuminate any other differences?

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

I'd be very grateful for any and all input

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

回答by nrabinowitz

I've done a fair amount of work with Protovis and a few things with D3. In addition to the points you mention, I think the following differences stand out for me:

我在 Protovis 上做了大量工作，在 D3 上做了一些工作。除了您提到的几点之外，我认为以下差异对我来说很突出：

• Where Protovis provides a simplified abstraction layer between the visual properties you're specifying, D3 uses the actual CSS and DOM specs - so instead of .width(10)or .fillStyle('#00C')you'd use .style('width', 10)or .attr('fill', '#00C'). In these examples, the difference is pretty trivial, but when you're doing something like drawing a line in an SVG image, there are big differences. The result is that using D3 can feel a little lower-level - you have more control, but you have to be pretty familiar with SVG syntax to do some of the things Protovis does much more easily.

• As you note, Protovis is all rendered in SVG, while D3 can use other parts of the DOM. This means that, for visualizations that don't require SVG-based visual elements, you can use D3 even with browsers that don't support SVG. It also means it's much easier to integrate HTML and SVG in the same visualization, which is really nice for things like dealing with text (text manipulation and layout is pretty weak in Protovis).

• D3 changes or drops some of the basic Protovis utilities like scales and data manipulation. I'm repeatedly annoyed that basic utilities like pv.sum()or pv.mean()don't have D3 equivalents, though some, like .nest(), are shared across the two libraries. Edit 10/1/12:D3 has filled out its data utilities, but there are still a few that Protovis includes and D3 doesn't, e.g. pv.dict, pv.numerate, and pv.repeat. Presumably they were left out because they were considered less generally useful.

• D3 provides utilities for asynchronous requests. When I want this in Protovis, I generally have to use an external library (i.e. jQuery).

• D3 API documentation is almost completely lackingincomplete, compared to quite detailed docs for Protovis. Edit (8/30/13): D3 now has complete and detailed API documentation on GitHub, so this point is no longer relevant.

• Finally, I haven't done much with animation, but I think you're entirely correct - D3 provides more animation support than Protovis, especially in terms of animated transitions. Protovis can re-render some or all of the visualization on demand, but doesn't have any support for stepping through a limited-duration animation - you'd have to code it all by hand with setInterval. D3 seems to make this a much more integral part of the library.

• 凡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()在两个库之间共享。编辑12年10月1日：D3填补了其数据的实用程序，但仍有少数Protovis包括与D3没有，例如pv.dict，pv.numerate和pv.repeat。据推测，它们被排除在外是因为它们被认为不太有用。

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

• 与 Protovis 的相当详细的文档相比，D3 API 文档几乎完全不完整。编辑 (8/30/13)：D3 现在在 GitHub 上有完整和详细的 API 文档，所以这点不再相关。

• 最后，我在动画方面做得并不多，但我认为您是完全正确的 - D3 提供了比 Protovis 更多的动画支持，尤其是在动画过渡方面。Protovis 可以按需重新渲染部分或全部可视化，但不支持单步执行有限持续时间的动画——您必须使用setInterval. D3 似乎使它成为库中更加不可或缺的一部分。

Edit (7/12/11): It looks like there's a new major difference - as of June 28, 2011, Protovis is no longer under active development, and the Protovis team is pushing D3.js instead. The last release is quite stable, so this shouldn't prevent you from using it, but it's definitely a point to consider.

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

回答by mbostock

There's a tutorial that covers the differences between D3 and Protovisin some detail. I agree with @nrabinowitz's description, though I will point out that we recently added extensive API documentation.

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

回答by pintxo

There is a recent paper from the Authors of Protovis/d3.js published 2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdfmainly about d3.js but containing some of the reasons why they changed certain things on the way from Protovis to d3.js.

最近有一篇来自 Protovis/d3.js 的作者发表于 2011 年的论文http://vis.stanford.edu/files/2011-D3-InfoVis.pdf主要是关于 d3.js 但包含一些他们改变某些的原因从 Protovis 到 d3.js 的过程。