6

SVG またはキャンバスをサポートしていない IE8 と互換性のあるインタラクティブな視覚化を作成するために、 Raphael.jsの代替としてFabric.jsを評価しています (IE8 のサポートは残念ながら交渉の余地がありません)。

Raphael は、Raphael での使用に適合した D3 のフォークであるブリッジ ライブラリD34Raphaelを介して、視覚化ライブラリD3.js (SVG を出力し、IE8 と互換性がない) と連携させることができます。D34Raphael は、IE8 で Raphael が D3 の出力を VML として解釈できるように、D3 機能の一部 (すべてではない) を DOM の代わりに Raphael の抽象化されたオブジェクトに出力するように適応させます。

(2014 年 2 月編集 - D34Raphael は現在死んでいるようですが、活発に開発されていると思われる素晴らしい名前の代替R2D3があります)

Fabric は IE8 で Canvas を出力でき ( excanvasを使用して VML に変換)、SVG をインタラクティブな Canvas 要素に変換できます。したがって、Fabric が D3 と IE8 の橋渡しで Raphael に取って代わる可能性は理論的にはありそうです。そうすることで、SVG だけでなく Canvas 機能もサポートするという追加の柔軟性がもたらされます。

D34Raphael に相当する Fabric は見つかりませんでした。最も近いものは、IE8 では動作しないこのデモ ページです。

私が Fabric のドキュメントで見たものから、D34Raphael のようなものが Fabric で試行できるように見えます: SVG パス、円、多角形、ポリライン、楕円、四角形、線、および画像要素の変換をサポートし、抽象化されたオブジェクトで動作します継続的なインタラクティブ性を可能にします。同じものを処理する Raphael と比較した Fabric 処理ベクトル パスのパフォーマンスを比較するベンチマークは印象的です (ただし、インタラクションやアニメーションを含む比較ベンチマークは提供されていません)。

例として、いくつかの典型的な D3 プロジェクトを示します。

これを調べたのは私が初めてではないと確信しています。このようなものを実装しようとする考えはあまり好きではありませんが、Fabric、Canvas、および/または D3 の経験が豊富な人なら誰でも最初から指摘できる避けられない問題があることに気付くだけです。

  • D34Raphael のように、fabric.js を使用して D3 出力をレンダリングできる既存のプロジェクトはありますか?
  • Fabric の SVG から Canvas への変換とオブジェクト モデルを単純にパイプすることができなかった D3 と SVG の連携方法について何かありますか?
  • D3プロジェクトをフォークしてその出力を適応させるD34Raphaelアプローチよりも、Fabricを介してD3出力をプッシュする簡単な方法はありますか?

私が試したこと：私がすでに調べたいくつかの問題：

  • Fabric は、D3 の DOM クエリ ツールを適応させる能力が非常に限られている点で、D34Raphael と同様の問題を抱えています (DOM 要素ではなく、抽象化されたオブジェクトで動作するため)。しかし、これは、よく整理されたオブジェクト構造で回避できるものです。
  • Raphael と Fabric はどちらも IE8 で VML を使用していますが、異なるエンジンを使用しているため、Raphael と Fabric のエクスキャンバスが VML で実装できた機能には違いがある可能性があります。これまでの私のテストでは、どちらも IE8 でのアニメーションと対話機能のパフォーマンスが劣っていましたが、機能は同等のように見え、Fabric はIE8 での VML テキストのレンダリングに関して Raphael よりもはるかに優れているようです。
  • Fabric の SVG から変換された形状のパフォーマンスは素晴らしく、D3 に基づく再描画、インタラクティブ性、およびアニメーションは、最初の描画と同様のプロセスを必要とするため、スムーズなはずです (ただし、ここで私が考えていないことがあるかもしれません)。
  • Fabric のグループは、Raphael のセットよりも、D3 で使用されているネイティブ SVG グループに似ているようです (ただし、ここで何かを見落としている可能性があります)。
4

1 に答える 1

13

免責事項: 私は Fabric.js の作成者です

非常に興味深い質問です。ポイントに対処するには：

D34Raphael のように、fabric.js を使用して D3 出力をレンダリングできる既存のプロジェクトはありますか?

私が知っていることではありません。しかし、私が見る限り、D3.js には SVG 出力があります。また、Fabric には SVG パーサーがあるため、レンダリングのために D3 のマークアップを Fabric にフィードするのは非常に簡単に思えます。

Fabric の SVG から Canvas への変換とオブジェクト モデルを単純にパイプすることができなかった D3 と SVG の連携方法について何かありますか?

私は D3 にあまり詳しくありませんが、リンク先の例の 1 つを見ると、実際にいくつかの互換性の問題が見られます。「強制有向グラフ」の SVG マークアップ全体をコピーして、kitchensinkにロードしました

ここに画像の説明を入力

円は適切にレンダリングされますが、線は何かがずれています。不思議なことに、すべての行が正しく解析され、キャンバスにロードされます。しかし、それらは目に見えません。なんで？D3.js のスタイルは「.line」クラスを介して定義されており、Fabric でのスタイルシートの解析はサポートされていないためです。

.link {
  stroke: #999;
  stroke-opacity: .6;
}

これらのスタイルを各行に「展開」すると (「ストローク」属性と「ストローク不透明度」属性またはスタイル="ストローク: ...; ストローク不透明度: ...;")、期待どおりに機能します。 .

円の周りの白い輪郭の問題は、同じルーツを持っていると思います。

D3プロジェクトをフォークしてその出力を適応させるD34Raphaelアプローチよりも、Fabricを介してD3出力をプッシュする簡単な方法はありますか?

本当に何も考えられません。

于 2013-08-01T12:39:53.803 に答える