D3.jsの積み重なった領域

Question

私はD3.jsを使用していますが、複数のシリーズのエリアチャートの積み上げレイアウトを設定する際に問題があります。私は私のデータの2つの可能な構造を持っています。一つは、この構造内のスクリプトに供給された生データである：

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'}] 

秒入れ子構造であり、このコードを使用して作成：

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: [...] } 

を

私の質問はです：上記のデータ構造（またはいくつかのバリエーション）のいずれかを使用してd3.layout.stack()ジェネレータをセットアップして、積み重ねたstrを作成するにはどうすればよいですか私のデータのためのucture、このような私は、これに似た領域ジェネレータにそれを渡すことができ：変更するには、まず最初にnest.entriesではなくnest.mapを使用することですので、あなたがスタックレイアウトに層の配列を養う必要があります

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

Answer 1

。 keyフィールド（ "Group1"など）と関連付けられたレコードを含むvalues配列を持つオブジェクトの配列を返します。スタックレイアウトが各レイヤーのvalues配列にアクセスできるように、stack.valuesアクセサを指定します。

ます。また、それはあなたの入力データを理解できるように、スタックレイアウトに適したXとYアクセサを定義する必要がありますすべきX -accessorはd.dateを返す必要があり、かつY -accessor返信d.value。また、日付文字列を日付に変換する必要があります。これを助けるのにd3.time.formatを使うことができます。例えば：ベースラインY0がy(d.y0)として定義され、トップラインY1はy(d.y0 + d.y)のように定義されるように

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

最後に、お住まいの地域の定義を変更してください。

• http://bl.ocks.org/3020685