Webページに動的に描画したいデモ画像を次に示します。これを行うのに役立つjavascriptまたはhtml5ライブラリはありますか?
質問する
2034 次
5 に答える
1
このようなグラフには infoVis または thejit ライブラリが最適だと思います。そのようなグラフをレンダリングできる JavaScript ライブラリです。データを入力するだけで、そのような力の有向グラフがレイアウトされます。私はかなり長い間それを使用してきましたが、その API は非常によく文書化されており、便利で柔軟です。
これらの 2 つの例を確認してください。
http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example1.html
http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example2.html
d3.js と infoVis は、最も広く使用されているライブラリのようです。
同様の要件があり、d3 と infoVis/JIT を含む 4 つのライブラリについてテストしました。
d3 と infoVis の両方で強制指向レイアウトを使用していました。どちらも非常に似ていますが、d3 でいくつかの問題があり、その解決が容易ではなかったため、infoVis/JIT を選択することになりました。
1: d3 に多くのノードを持つグラフがある場合、グラフはかなり長い時間移動/アニメーションを続けます。d3グラフがティックごとにアニメーション化するためであることがわかりました。こことフォーラムでいくつかの解決策を見つけましたが、この問題を解決するのは簡単ではなく、うまくいきませんでした。
2: グラフがレンダリングされたら、ノードをドラッグしようとすると、グラフ全体が移動してアニメーション化されます。私の要件は、個々のノードを個別にドラッグして配置し、グラフをそのままにして、ユーザーが必要に応じてノードを再配置できるようにすることでした。d3でこれに対する簡単な解決策を見つけることができませんでした.
これらの問題は両方とも、infoVis/JIT で解決されました。
これらのリンクを確認して、d3.js を使用する場合に発生する可能性がある問題の種類を確認してください。
于 2013-07-02T06:46:54.217 に答える
0
「キャンバス」がありますが、SVG (スケーラブル ベクター グラフィックス)をお勧めします。これは、表示を生成するためのすべてのプリミティブをサポートしています。SVG と Canvas の大きな違いの 1 つは、Canvas ではすべてがすぐにラスター化される(つまり、ピクセルの大きな領域に描画される)ことですが、SVG 領域は必要に応じてレンダリングされるベクター オブジェクトで妥協されます。
VRML のみを理解する特定の古いブラウザを「シム」するRaphaelJSのようなライブラリがあります。RaphaelJS は、SVG VML の操作も少し簡単にします。
Raphaël ['ræfeɪəl] は、SVG W3C 勧告と VML をグラフィック作成のベースとして使用しています。これは、作成するすべてのグラフィカル オブジェクトが DOM オブジェクトでもあることを意味するため、JavaScript イベント ハンドラーをアタッチしたり、後で変更したりできます。Raphaël の目標は、ベクター アートの描画をクロス ブラウザーと互換性があり、簡単にするアダプターを提供することです。
グラフの例は、同様のレイアウト (「線」で接続された形状) を示しており、インタラクティブですらあります。
于 2013-07-02T06:20:33.127 に答える
0
HTML5 はこのための canvas 要素を提供します。現在のブラウザへの移植性が非常に高くなりました。ここにチュートリアルがあります: http://www.w3schools.com/html/html5_canvas.asp
于 2013-07-02T06:15:11.667 に答える