Protovis和D3.js [英] Protovis vs D3.js

问题描述

TLDR：任何人都有过protovis& D3.js来照亮两者之间的差异？

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

我在过去的2周里一直在使用protovis，到目前为止它一直很棒。除了现在我似乎打了一个砖墙与动画。

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.

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

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

我想做一些很简单的动画，但是用protovis感觉不够直观 - 我开始认为，protovis从来没有真正的动画。所以，我开始看D3.js：

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:

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

它看起来很相似，但是：

It looks very similar, but:

• 看起来更轻巧


• 似乎适合与其他DOM元素以及SVG交互


• 似乎要添加动画

任何人都可以照亮任何其他差异？

Can anyone illuminate any other differences?

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

I'd be very grateful for any and all input

推荐答案

我做了大量的工作与Protovis和几乎没有D3。除了你提到的点，我认为以下差异突出我：

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使用实际的CSS和DOM规范 - 所以代替 .width（10）或 .fillStyle ＃00C'）您将使用 .style（'width'，10）或 .attr ，'＃00C'）。在这些例子中，差别是相当微不足道，但是当你做一些事情，如在SVG图像中绘制一条线，有很大的差异。结果是使用D3可以感觉有点低级 - 你有更多的控制，但你必须非常熟悉SVG语法做一些东西Protovis更容易。

• 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.

如你所知，Protovis是在SVG中渲染的，而D3可以使用DOM的其他部分。这意味着，对于不需要基于SVG的可视化元素的可视化，即使使用不支持SVG的浏览器，也可以使用D3。这也意味着在同一个可视化中集成HTML和SVG更容易，这对于处理文本（文本处理和布局在Protovis中非常弱）非常有用。

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会更改或删除一些基本的Protovis实用程序，如缩放和数据操作。我反复懊恼，基本的工具，如 pv.sum（）或 pv.mean（） D3等同，但有些，如 .nest（），在两个库之间共享。 编辑10/1/12： D3已填写其数据实用程序，但仍有一些Protovis包括和D3不，例如。 pv.dict ， pv.numerate 和 pv.repeat 。

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为异步请求提供了实用程序。当我想在Protovis中，我通常必须使用外部库（即jQuery）。

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文档是<罢工>不完整，相比Protovis的相当详细的文档。 编辑（8/30/13）：D3现在已完成，

D3 API documentation is almost completely lacking incomplete, 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.

最后，我没有对动画做任何事，但我认为你完全正确 - D3提供了比Protovis更多的动画支持，特别是在动画过渡方面。 Protovis可以根据需要重新呈现一些或所有可视化，但是没有任何支持通过有限持续时间的动画 - 你必须用 setInterval code>。

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.

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

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.

这篇关于Protovis和D3.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！