web-dev-qa-db-ja.com

ProtovisとD3.js

TLDR:protovisとD3.jsの両方の経験があり、両者の違いを明らかにしていますか?

私はこの2週間、プロトビスで遊んでいますが、これまでのところ素晴らしかったです。今を除いて、アニメーションでレンガの壁に少しぶつかったようです。

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

とてもシンプルなアニメーションを作りたいのですが、protovisを使うと直感的ではないように感じます-protovisは実際にはアニメーション用ではないと思い始めています。だから、私はD3.jsを見始めました:

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

よく似ていますが、次のとおりです。

  • より軽量のようです
  • SVGと同様に他のDOM要素とやり取りするように調整されているようです
  • アニメーションの追加に合わせているようです

誰でも他の違いを明らかにできますか?

ありとあらゆる入力にとても感謝します

84

私は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()のような一部のユーティリティは2つのライブラリ間で共有されます。 Edit 10/1/12:D3はデータユーティリティを記入しましたが、Protovisには含まれているがD3には含まれていないものがまだいくつかあります。 pv.dictpv.numerate、およびpv.repeat。おそらく、それらはあまり有用ではないと考えられたため、除外されたのでしょう。

  • D3は、非同期リクエスト用のユーティリティを提供します。 Protovisでこれが必要な場合、通常、外部ライブラリ(つまりjQuery)を使用する必要があります。

  • D3 APIドキュメントは ほとんど完全に欠けている Protovisの非常に詳細なドキュメントと比較して、不完全です。 (8/30/13)編集:D3に GitHubの完全かつ詳細なAPIドキュメント が追加されたため、このポイントはありませんより長く関連。

  • 最後に、私はアニメーションをあまり使いませんでしたが、あなたは完全に正しいと思います-D3は、特にアニメーション化されたトランジションに関して、Protovisよりも多くのアニメーションをサポートします。 Protovisは、視覚化の一部またはすべてをオンデマンドで再レンダリングできますが、期間が制限されたアニメーションのステップ実行をサポートしていません。setIntervalを使用してすべてを手動でコーディングする必要があります。 D3は、これをライブラリのはるかに不可欠な部分にしているようです。

Edit(7/12/11):新しい大きな違いがあるようです-2011年6月28日の時点で、Protovisは現在活発に開発されていません、Protovisチームは代わりにD3.jsをプッシュしています。最後のリリースは非常に安定しているので、これを使用することを妨げることはありませんが、間違いなく考慮すべきポイントです。

115
nrabinowitz

D3とProtovis の違いを詳細にカバーするチュートリアルがあります。 @nrabinowitzの説明に同意しますが、最近広範囲な APIドキュメント を追加したことを指摘します。

32
mbostock

2011年に公開されたProtovis/d3.jsの著者による最近の論文があります http://vis.stanford.edu/files/2011-D3-InfoVis.pdf 主にd3.jsについてですが、 Protovisからd3.jsへの途中で特定のものを変更した理由の一部です。

6
pintxo