問題タブ [stream-graph]

私は D3 の初心者なので、質問はおそらくかなり単純ですが、私にとっては今大きな問題です。

質問：

ストリームグラフを垂直にするには? 私のJSFiddle

私はこれを持っています：

私はこれを持っている必要があります：

フィドルはこちら

JS

時間の経過とともに同様の用語を視覚化するためにストリームグラフを作成しようとしましたが、常に y0 に対して NaN を返します。自分のソリューションをインターネット上のいくつかのソリューションと比較しましたが、違いはわかりません。コードは次のとおりです。

github.com/adius/simterm

私は気が狂いそうになっているので、どんな助けも本当にありがたいです。;'(

.csv ファイルのデータからストリーム グラフを作成したいと考えています。ストリーム グラフを生成するためにhttp://bl.ocks.org/lgrammel/1935509をフォークしましたが、データの読み込みでスタックしました。私のJSは以下です。

コンソール ログにはデータ配列が適切に表示されますが、エラーも発生しますError: Problem parsing d="MNaN,NaNLNaN,NaNLNaN,NaNLNaN,NaNLNaN,N。http://bl.ocks.org/korenmiklos/8052011には何も表示されません

私は d3.js が初めてで、多変量​​パーセンタイル グラフの線の間の領域を埋めるのに苦労しています。

• 一番下の線より下、または一番上の線より上の領域を塗りつぶしたくありません。
• 最初の列は常にグラフの下部 (5 パーセンタイル) になります。
• 最後の列は常にグラフの一番上に表示されます (95 パーセンタイル)。
• 各行の間に個別の領域セグメントが必要です

次のように (y0, y1) の間を埋める領域を定義する必要があることはわかっています。

ただし、 .y1 セクションに何を入力すればよいかわかりません。理想的には、TSV の次の行の次の値を取得するだけですが、これを適切に行う方法がわかりません。

テスト目的で、必要なエリア セグメントの 1 つを作成する次のものがあります。

私はこのようなものが欲しいのですが、csv/tsv から別の行を参照していないため、この例は役に立ちません:

http://bl.ocks.org/mbostock/4060954

これは似ていますが、多変量ではなく二変量です。

http://bl.ocks.org/mbostock/3894205

これが私の進行中の作業です（ソースを表示）：

http://artfuladvection.com/project/NOAA/percentilesGraph/multipercentile.html

私のTSVは次のように設定されています：

何か助けはありますか？

d3.js を使用してストリームグラフを設計する必要があり、GitHubでホストされているコードの実験を開始しました。私のデータセットは、日付の最小値と最大値の間でさまざまな範囲を持つことが予想されるため (1 か月または数年の期間になる可能性があります)、代わりに x 軸の目盛にマルチスケール形式を使用することにしました。形式と間隔を週、月、年などに固定します。たとえば、GitHub のサンプル コードで指定されているのと同じようにティック形式をそのままにしておくと、

私のデータセットの日付の範囲が数年にわたる場合、x 軸の凡例は混雑して読めなくなります。

マルチスケール形式を使用しようとしましたが、ビジュアライゼーションが描画されず、ブラウザーの開発ツールが次のエラーを返します。

d3.time.format.multi は関数ではありません

誰かがこの問題の解決策を提案してくれることを心から願っています。

以下に、私の完全なコードを示します。

まず、GitHub のサンプルのデータセットを使用しています。

Web サービスから取得しているデータを使用して、 GitHubで提示されているインタラクティブなストリームグラフを再作成しようとしています。GitHub のサンプルと同じコードを使用してグラフを生成していますが、パス要素 (正確にはそれらの d 属性) の MNaN および NaN 座標を取得しています。結果は、x 軸と y 軸のみが描画され、それ以上何も描画されない空のグラフになります。

便宜上、データセットを生成する Web サービスのコード (C#) を次に示します。

編集 1: データセットのメンバーの定義を C# クラスとして追加するのを忘れていました。この質問は、他の質問の山ですでに失われている可能性があることを知っていますが、それでも助けていただければ幸いです。

編集 2: 動作していることが判明したサンプル データセットを思いつきました。Web サービスからランダムに生成する代わりに、.csv ファイルに保存し、GitHub で提供されているコードと同様に取得しています。

キー、値、日付 AB,100,01/08/13 AB,15,01/09/13 AB,35,01/10/13 AB,38,01/11/13 AB,22,01/12/13 AB,16,01/13/13 CD,35,01/08/13 CD,36,01/09/13 CD,37,01/10/13 CD,22,01/11/13 CD,24,01 /12/13CD,26,01/13/13EF,21,01/08/13EF,25,01/09/13EF,27,01/10/13EF,23,01/11/13EF ,24,01/12/13 EF,21,01/13/13 GH,10,01/08/13 GH,15,01/09/13 GH,35,01/10/13 GH,38,01/ 11/13 GH,22,01/12/13 GH,16,01/13/13

また、Web サービスから取得したランダムに生成されたデータセットである、動作しない例もあります。

キー、値、日付 AB,1,6/5/1992 AB,4,11/29/1992 AB,2,11/3/1993 A B,7,8/1/1995 AB,9,8/1/1996 AB,15,8/1997/1 CD,1,6/5/1992 C D,2,11/29/1992 CD,5,11/3/1993 CD,10,8/1/1995 CD,12,8 /1/1996 C D,19,8/1/1997 EF,1,6/5/1992 EF,20,11/29/1992 EF,16,11/3/1993 E F,6,8/1/1995 EF ,10,8/1/1996 EF,5,8/1/1997 GH,1,6/5/1992 G H,17,11/29/1992 GH,16,11/3/1993 GH,6,8/ 1/1995 GH,10,8/1996 G H,20,8/1/1997

サンプルページに異なるデータセットを示す複数のプロットを作成するために、d3 で関数を作成しました。

私はストリームグラフとスタック レイアウトを使用していますが、同じコードで as offset を使用してプロットを生成できる理由を理解できませんzero。expand同じsilhouetteデータセットと同じスタック レイアウトを使用している間、wiggleオフセットは何も生成しません。（私はすでにドキュメントを複数回読んでいます）

コードの抜粋を以下に示します。

から返されるデータの構造は次のstacked.datalayer()とおりです。

結果のスクリーンショットを次に示します (同じデータセットを使用)。

オフセット「ゼロ」:

オフセット「拡張」:

オフセット「シルエット」:

オフセット「ウィグル」: