2

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

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

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

var area = d3.svg.area()
.x(function(d) { return x(d.date); })
.y0(function(d) { return y(BOTTOM); })
.y1(function(d) { return y(TOP); });

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

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

.y0(function(d) { return y(+d.p05); })
.y1(function(d) { return y(+d.p25); });

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

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

ここに画像の説明を入力

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

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

ここに画像の説明を入力

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

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

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

date    p05 p25 p50 p75 p95
20140122    3   4   5   6   12
20140123    9   10  12  22  34
20140124    14  16  18  34  66

何か助けはありますか？

4

1 に答える 1