C3 - JSONとカテゴリによるタイムズチャート

Question

私はC3ライブラリを初めて使用しています。痛みのないシンプルで再利用可能なチャートを設計するためのD3の良い選択肢だと思います。

しかし、私はtimeseriesチャートを設計する際にいくつかの問題があります。ここ は、私は私のチャートを生成するために使用するJSONファイルの例です：

data: { 
    json: [ 
    { 
     "city": "Paris", 
     "date": "2016-09-01", 
     "event": 234 
    }, 
    { 
     "city": "Paris", 
     "date": "2016-09-02", 
     "event": 891 
    }, 
    { 
     "city": "Paris", 
     "date": "2016-09-03", 
     "event": 877 
    }, 
    { 
     "city": "Berlin", 
     "date": "2016-09-01", 
     "event": 190 
    }, 
    { 
     "city": "Berlin", 
     "date": "2016-09-02", 
     "event": 234 
    }, 
    { 
     "city": "Berlin", 
     "date": "2016-09-03", 
     "event": 231 
    }, 
    { 
     "city": "London", 
     "date": "2016-09-01", 
     "event": 23 
    }, 
    { 
     "city": "London", 
     "date": "2016-09-02", 
     "event": 12 
    }, 
    { 
     "city": "London", 
     "date": "2016-09-03", 
     "event": 89 
    }, 
], 

問題は、私は両方の私のx軸を設定することができないということです。カテゴリとして時系列タイプとキー「都市」としてタイプ。今の

私が持っている：

keys: { 
    x: 'period', 
    value: ['event'], 
}, 
axis: { 
x: { 
    type: 'timeseries', 
    tick: { 
    format: '%Y-%m-%d' 
    } 
} 
}, 
type: 'spline' 

と、対応するPlunker：http://plnkr.co/edit/T1aLWQpaFwdu2zsWCa3d

私はJSONファイルから取得されている3つの都市に対応し、3つのスプラインを持っていると思います。

これを達成するのに手伝ってもらえますか？

はどうもありがとうございました:)

Answer 1

あなたがここで例に似ているC3は許容見つけたフォーマットにデータを口論する必要がある - 私たちが必要と思い、あなたのために>https://jsfiddle.net/maxklenk/k9Dbf/

私たちは、元のJSONを操作する必要があることを行うには

[{ 
    date = val 
    London = val 
    Paris = val 
    Berlin = val 
}, 
... 
] 

のようなエントリの配列：

 var json = <defined here> 

     // group json by date 
     var nestedData = d3.nest().key(function(d) { return d.date; }).entries(json); 
     var cities = d3.set(); // this keeps a record of the cities mentioned so we don't need to hard-code them later on 
     // run through the dates and make new objects of city=entry pairs (and the date=whatever) 
     // all stored in a new array (formattedData) which we can feed to the chart json argument 
     var formattedData = nestedData.map (function (entry) { 
     var values = entry.values; 
     var obj = {}; 
     values.forEach (function (value) { 
      obj[value.city] = value.event; 
      cities.add(value.city); 
     }) 
     obj.date = entry.key; 
     return obj; 
     }); 


     var chart = c3.generate({ 
     data: {json: formattedData, 
      keys: { 
       x: 'date', // it's possible to specify 'x' when category axis 
       value: cities.values(), 
      } 
     }, 
... 

http://plnkr.co/edit/5xa4z27HbHQbjcfpRLpQ?p=preview