7

D3.jsを使用していますが、複数のシリーズを含む面グラフのスタックレイアウトを設定するのに問題があります。私のデータには2つの可能な構造があります（それが役立つ場合）。1つは、この構造でスクリプトに供給される生データです。

var data = [{key: 'Group1', value: 37, date: '04/23/12'},
           {key: 'Group2', value: 12, date: '04/23/12'},
           {key: 'Group3', value: 46, date: '04/23/12'},
           {key: 'Group1', value: 32, date: '04/24/12'},
           {key: 'Group2', value: 19, date: '04/24/12'},
           {key: 'Group3', value: 42, date: '04/24/12'},
           {key: 'Group1', value: 45, date: '04/25/12'},
           {key: 'Group2', value: 16, date: '04/25/12'},
           {key: 'Group3', value: 44, date: '04/25/12'},
           {key: 'Group1', value: 24, date: '04/26/12'},
           {key: 'Group2', value: 52, date: '04/26/12'},
           {key: 'Group3', value: 64, date: '04/26/12'}]

2つ目は、次のコードを使用して作成されたネストされた構造です。

 pData = d3.nest()
            .key(function(d) { return d.key; })
            .map(data);

この構造になります：

pData = {Group1: [{date: 04/23/12, key: "Group1", value: 37}, 
                  {date: 04/24/12, key: "Group1", value: 32}, 
                  {date: 04/25/12, key: "Group1", value: 45},
                  ...],
         Group2: [{date: 04/23/12, key: "Group2", value: 12},
                  {etc, etc, etc}],
         GroupX: [...] }

私の質問は次のとおりです。上記のデータ構造の1つ（またはいくつかのバリエーション）を使用してジェネレーターをセットアップし、次d3.layout.stack()のようなエリアジェネレーターにデータを渡すことができるようにデータのスタック構造を作成するにはどうすればよいですか？

var areaGenerator = d3.svg.area()
    .interpolate('monotone')
    .x(function(d) { return x(d.date); })
    .y0(h)
    .y1(function(d) { return y(d.value); });
4

1 に答える 1

12

レイヤーの配列をスタックレイアウトにフィードする必要があるため、最初に変更するのは、nest.mapではなくnest.entriesを使用することです。keyこれにより、フィールド（ "Group1"など）を持つオブジェクトのvalues配列と、関連するレコードを含む配列が返されます。次に、 stack.valuesアクセサーを指定して、スタックレイアウトがvalues各レイヤーの配列にアクセスできるようにします。

また、入力データを理解できるように、スタックレイアウトに適切なxおよびyアクセサーを定義する必要があります。xアクセサーはを返しd.date、yアクセサーはを返す必要がありd.valueます。また、日付文字列を日付に変換する必要があります。これを支援するためにd3.time.formatを使用できます。例えば：

var format = d3.time.format("%m/%d/%y");
data.forEach(function(d) { d.date = format.parse(d.date); });

最後に、ベースラインy0がとして定義されy(d.y0)、トップラインy1がとして定義されるようにエリア定義を変更しますy(d.y0 + d.y)。

実例は次のとおりです。

于 2012-06-29T21:15:00.943 に答える