31

D3 で時系列折れ線グラフを作成したいと考えています。下のグラフの小さいバージョンを使用すると、ユーザーは Google Finance グラフのように、グラフの特定のセクションを拡大できます。

私が見つけた最も近い例は、このスイムレーン チャートです。

http://bl.ocks.org/1962173

D3の折れ線グラフでこれを行う例はありますか?

注意:この例のように、純粋にドラッグ/ズーム可能な x 軸ではなく、サイズ変更可能なブラシを上に置いた小さなバージョンのグラフが絶対に必要です。

理想的には、 Rickshawを使用したいのですが、Rickshaw の例には、範囲スライダーしかないようです。したがって、人力車の例はさらに優れています。

4

7 に答える 7

34

NVD3は、 D3 に書かれた再利用可能なチャートを多数持つ非常にクールなプロジェクトです。ビュー ファインダーを含む折れ線グラフの例とソース コードについては、こちらを参照してください。

View Finder を使用した NVD3.js 折れ線グラフ

更新: NVD3 の例は、Mike Bostock (D3 の作成者) の例にもリンクしています。これは、純粋に D3.js で実装された同様の機能、データの選択にズーム/フォーカスする機能を示しています。

ブラッシングによる D3.js フォーカス + コンテキスト

于 2012-08-16T16:16:37.687 に答える
14

dygraphs は、このデモで必要なことを正確に実行します。

http://dygraphs.com/gallery/#g/range-selector

ここに画像の説明を入力

于 2013-04-22T02:44:50.887 に答える
6

HighStock、 HighCharts のあまり知られていない兄弟はどうですか?

ここに画像の説明を入力

于 2013-09-10T17:43:12.633 に答える
4

あなたがD3を使用するつもりであることは知っていますが、Humble Financeは、JavaScriptとキャンバスだけで必要なことを正確に実行するため、言及する価値があります。

あなたが本当にD3を使うことに熱心であるなら、私はあなたがあなた自身のものを作らなければならないと思います、それはどれほど良くて適切な謙虚な財政がどれほど良いかを考えると時間の無駄でなければなりません。

Humble Financeを試すためのヒント：zipダウンロードには必要なflotr2が含まれていませんが、ここから簡単にダウンロードできます（もちろん、必要なflotr2ファイルを適切な場所のHumble Financeディレクトリに追加する必要があります）。

編集：

Humble Financeを無視して、私はそれをたくさん使ってみました、そしてそれは私を曲がりくねったところに追いやった。コードベースはかなり乱雑であるように思われ、ページを機能させるには、ページに多くのライブラリを追加する必要がありました。その場合、グラフにわずかな変更を加えることさえ非常に困難です。現在D3を使用していますが、SVGのレンダリングが遅すぎて、曲線上に多数のポイントがあります。結局、D3を使用して軸を描画し、スケールを設定して時間枠を変更するものをレンダリングし、キャンバスを使用して曲線を描画しました。それはかなりうまくいくようです。申し訳ありませんが、表示できる例はどこにもありません。

于 2012-12-09T19:06:04.667 に答える
3

クロスフィルターを見たことがありますか？D3 に基づく別の製品で、Google Finance のインターフェイスと同様のプロパティがあります。

于 2012-08-14T14:20:42.100 に答える
0

人力車はこれをサポートするようになりました!

例とを参照してくださいRickshaw.Graph.RangeSlider.Preview。

于 2014-07-19T09:54:55.587 に答える
0

あなたが言及したフレームワークのどちらにも精通していませんが、代わりにGoogle チャートを使用するオプションがあるかどうか疑問に思いましたか? これを使用すると、Google Finance で彼らが何をしているかを知ることができ、その方法の例は彼らの Web サイトから取得できます。

調査する他のフレームワークを探している場合は、Emprise Charts をお勧めします。そこで同様のことができると確信しており、開発チームは非常に役に立ちます。

于 2012-08-13T10:55:49.087 に答える