Protovis 与 D3.js
TLDR：有谁有 protovis 和 protovis 的经验吗？ D3.js 能否阐明两者之间的差异？
过去两周我一直在玩 protovis，到目前为止效果非常好。但现在我似乎在动画方面遇到了一些障碍。
protovis： http://vis.stanford.edu/protovis/
我想做一些非常简单的动画，但使用 protovis 感觉不太直观 - 我开始认为 protovis 从来就不是真正用于动画的。因此，我开始研究 D3.js：
http://mbostock.github.com/d3/ex/stack。 html
它看起来非常相似，但是：
- 似乎更轻量级
- 似乎适合与其他 DOM 元素以及 SVG
- 交互 似乎适合添加动画
谁能阐明任何其他差异吗？
我将非常感谢任何和所有的意见
TLDR: Does anyone have experience of both protovis & D3.js to illuminate the differences between the two?
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/
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:
- Seems more lightweight
- Seems geared to interacting with other DOM elements as well as SVG
- Seems geared to adding animations
Can anyone illuminate any other differences?
I'd be very grateful for any and all input
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我已经用 Protovis 做了相当多的工作，并用 D3 做了一些工作。除了您提到的几点之外，我认为以下差异对我来说很突出：
Protovis 在您指定的视觉属性之间提供了一个简化的抽象层，而 D3 使用实际的 CSS 和 DOM 规范 - 所以而不是 < code>.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 ()，在两个库之间共享。 编辑 10/1/12： 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 似乎使它成为库中更不可或缺的一部分。编辑 (7/12/11)：看起来有一个新的重大差异 - 截至 2011 年 6 月 28 日，Protovis 不再处于积极开发状态，Protovis 团队正在推动 D3.js 。最新版本非常稳定，因此这不应妨碍您使用它，但这绝对是需要考虑的一点。
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:
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()orpv.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, andpv.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.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.
有一个教程详细介绍了 D3 和 Protovis 之间的差异。我同意 @nrabinowitz 的描述，不过我会指出，我们最近添加了广泛的 API 文档。
There's a tutorial that covers the differences between D3 and Protovis in some detail. I agree with @nrabinowitz's description, though I will point out that we recently added extensive API documentation.
Protovis/d3.js 的作者于 2011 年发表了一篇最新论文 http:// /vis.stanford.edu/files/2011-D3-InfoVis.pdf 主要是关于 d3.js，但包含他们在从 Protovis 到 d3.js 的过程中更改某些内容的一些原因。
There is a recent paper from the Authors of Protovis/d3.js published 2011 http://vis.stanford.edu/files/2011-D3-InfoVis.pdf mainly about d3.js but containing some of the reasons why they changed certain things on the way from Protovis to d3.js.