[解決済み] ProtovisとD3.jsの比較
質問
TLDR: どなたかprotovis & D3.jsの両方の経験をお持ちの方は、両者の違いを教えていただけませんか?
私はこの2週間protovisで遊んでいて、今のところ素晴らしいものでした。しかし、今、私はアニメーションで少し煉瓦の壁に当たったようです。
protovis。 http://vis.stanford.edu/protovis/
私は非常に簡単なアニメーションを行いたいのですが、protovisでは直感的でないように感じます - protovisは本当にアニメーション用ではなかったと思い始めています。 そこで、私はD3.jsを見始めました。
http://mbostock.github.com/d3/ex/stack.html
見た目はとても似ていますが
- より軽量に見える
- SVG だけでなく、他の DOM 要素との相互作用に適しているように見える。
- アニメーションを追加するように設計されているようです。
誰か他の違いを教えてください。
どんな意見でも、とてもありがたいです。
どのように解決するのですか?
私はProtovisでかなりの量を、D3ではいくつかのことをやってきました。ご指摘の点に加えて、私は以下のような違いが目立つと思います。
-
Protovisが、指定する視覚的なプロパティの間の簡略化された抽象化レイヤーを提供するのに対し、D3は実際のCSSとDOMの仕様を使用します。
.width(10)
または.fillStyle('#00C')
を使うのであれば.style('width', 10)
または.attr('fill', '#00C')
. これらの例では、違いはかなり些細なものですが、SVG画像に線を引くようなことをするときには、大きな違いがあります。その結果、D3を使用すると、少しレベルが低く感じられます。つまり、より多くの制御が可能ですが、Protovisがより簡単にできることのいくつかを行うには、SVG構文にかなり精通している必要があります。 -
ご指摘の通り、ProtovisはすべてSVGでレンダリングされますが、D3はDOMの他の部分を使用することができます。つまり、SVGベースの視覚的要素を必要としないビジュアライゼーションであれば、SVGをサポートしていないブラウザでもD3が使えるということです。また、HTMLとSVGを同じビジュアライゼーションで統合することがより簡単になり、テキストを扱うような場合にとても便利です(Protovisではテキスト操作やレイアウトがかなり弱いです)。
-
D3は、スケールやデータ操作のようなProtovisの基本的なユーティリティのいくつかを変更または削除しています。のような基本的なユーティリティが削除されていることに、私は繰り返しイライラさせられます。
pv.sum()
やpv.mean()
のように、D3には相当するものがありません。.nest()
のように、2つのライブラリで共有されているものもあります。 10/1/12を編集しました。 D3はデータユーティリティを完成させましたが、Protovisが含んでいてD3が含んでいないものがまだいくつかあります、例えばpv.dict
,pv.numerate
そしてpv.repeat
. おそらく、これらは一般的にあまり有用でないと考えられたため、省かれたのでしょう。 -
D3は非同期リクエストのためのユーティリティを提供します。Protovisでこれを実現する場合、一般的には外部ライブラリ(例:jQuery)を使用する必要があります。
-
D3 APIドキュメントは <ストライク はほとんどありません。 で、Protovisのかなり詳細なドキュメントと比べると不完全なものです。 編集(8/30/13) : D3は現在 完全で詳細な API ドキュメントが GitHub にあります。 になっているので、この点はもう関係ありません。
-
最後に、私はアニメーションをあまり扱ったことがありませんが、あなたが完全に正しいと思います - D3はProtovisより多くのアニメーションサポートを提供し、特にアニメーション遷移の点で優れています。Protovisは必要に応じて可視化の一部または全部を再レンダリングすることができますが、限られた時間のアニメーションをステップ実行するためのサポートは持っていません。
setInterval
. D3は、これをライブラリのはるかに不可欠な部分にしているようです。
編集 (7/12/11) : 新しい大きな違いがあるようです。2011年6月28日現在、Protovisは活発な開発中ではなく、Protovisチームは代わりにD3.jsを推しています。最後のリリースは非常に安定しているので、これを使うことを妨げるものではありませんが、考慮すべき点であることは間違いありません。
関連
-
[解決済み] <Enter>でjQuery UIダイアログを送信する
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] JavaScriptで:hoverのCSSプロパティを変更する
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] javascriptで文字列から関数を作成する方法はありますか?
-
[解決済み] ECMAScriptとは?
-
[解決済み] JavaScript で `throw` の後に `return` をする必要がありますか?
-
[解決済み] Chrome拡張機能:popup.htmlを強制終了させる
-
[解決済み] JavaScriptでDIVを表示・非表示にするには?
-
[解決済み] 高速で応答性の高いインタラクティブなチャート/グラフ。SVG、Canvas、その他?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Node.jsでbase64エンコードされた画像をAmazon S3へアップロードする
-
[解決済み] なぜ "use strict "はパフォーマンスを10倍向上させるのか?
-
[解決済み] React js 親コンポーネントから子コンポーネントの状態を変更する
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] サブドメインにまたがってlocalStorageを使用する
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] TypeScriptプロジェクトで既存のC#クラス定義を再利用する方法
-
[解決済み] 文字列とラベルのローカライズとグローバリゼーションのベストプラクティス【終了しました
-
[解決済み] Prototypeを使ってtextareaを自動サイズ調整するには?
-
[解決済み] HTML要素にスクロールバーがあるかどうかをチェックする