web-dev-qa-db-ja.com

D3.jsとRaphael.js

私はd3とRaphaelの両方に魅了されています。ラファエルは d3の上に構築されており、 ブラウザ間の互換性はありますが、どのシナリオに適しているかはわかりません。誰かが光を当ててください。私の直接のユースケースは、潜在的にSIMILEタイムラインを使用し、それを状態図(私はd3/Raphaelを使用する予定です)と統合することです。ありがとう!

52
Nick

RaphaelはD3上に構築されていません。

ラファエルは、要素を描くのに役立ちます。 D3はより包括的で、データを要素にバインドするのに役立ちます。したがって、D3の方が強力だと思います。 このフォーラムのディスカッション D3を使用したSIMILEタイムラインの提示について説明します。D3でタイムラインを実装する このプロジェクト を参照しています。したがって、一見するとD3が答えです。

ただし、SIMILEタイムラインを処理するD3用のウィジェットがないように思えると、RaphaelまたはD3のいずれかが適切な選択になる可能性があります。つまり、 この記事 で説明されているように、D3がInternet Explorerの以前のバージョンでうまく動作しないという事実を除いて、IEの以前のバージョンをサポートする必要がある場合は、ラファエル。

45
CL22

D3はRaphaelよりも学ぶのがはるかに困難ですが、どちらの場合も、より良いアニメーションを作成できるようにSVGを学ぶ必要があります。一方、通常、D3ビジュアライゼーションは、多くのパッケージ済みレイアウトが既に存在するため、類似のProcessingまたはRaphaelの例よりも少ない数学を必要とします。

D3は現在のWeb標準スタック(HTML、DOM-嫌いな場合でも、CSS、SVG、Canvasでさえ使用する必要があります)に基づいており、ライブラリであるためデータを操作するため。データフレームワークであるD3には、次のものも含まれています。

  • 大量のアルゴリズムとレイアウト(強制レイアウト、スタックレイアウト、ツリーなど)、
  • 基本的なデータラングリング機能(ネスト、クロス、グループ化、ロールアップ-これらの例を参照してください: http://bl.ocks.org/phoebebright/raw/3176159/ )、
  • jQueryスタイルの選択、
  • また、視覚化プリミティブ(d3.svgには、単純なグラフィックスに必要なものがすべて付属しています)。

現状では、d3は多くの場合RaphaelとProcessingよりも優れているだけでなく、jQuery、underscore.js、およびその他のフレームワークの実行可能な代替品でもあります。その上には多くのチャートライブラリが構築されているので、いつでもクールなチャートをドラッグアンドドロップして、データラッパーを書き換えることができます。

このインターフェイスを使用して、いくつかの適切なタイムラインの例を見つけることができます。 http://biovisualize.github.com/d3visualization/#visualizationType=timeline

26
paxRoman

両方とも異なる動物です。

RaphaelJSは、SVGおよびVMLに基づいたベクターグラフィックスの機能を簡素化および拡張します。

D3jsは単にDOMを操作し、グラフィック標準(SVGとCanvas、DIVを使用できる棒グラフでも)に依存して描画します。たとえば、d3.svg.symbol()dパラメータの内容を返し、SVG上のpath要素に渡しますが、シンボルを単独で描画しません。

D3jsを使用して、データを操作し、Raphaelで描画できます。

このブログ 結合方法の説明D3js+Raphael。また、 D3 for Raphael の実装も確認してください。

17
jkutianski

公共部門のコンサルタントとして、Raphaelの学習は、クライアントが古いバージョンのブラウザーを使用することが多いため、私にとってより良い投資であることがわかりました。現在のクライアントはIE7のみを使用しており、Raphaelは完全に動作しますが、D3は動作しません。

個人的にはD3を使用したいのですが、専門的にはそれが私の状況の現実ではありません。

10
Jared