C3 - 與JSON和類別的時間序列圖

Question

我第一次使用C3庫，我認爲這是一個很好的替代D3設計簡單和可重複使用的圖表沒有痛苦。

但是，我在設計時間序列圖時遇到了一些問題。 這裏是我會用它來生成我的圖表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

我想有3樣條曲線，對應於從JSON文件中檢索到的3個城市。

你能幫我實現嗎？

非常感謝你:)

Answer 1

您需要將您的數據纏鬥成C3認爲可以接受的格式，它是類似於這裏的例子 - >https://jsfiddle.net/maxklenk/k9Dbf/

對於我們需要的你條目的數組像

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

要做到這一點，我們需要處理的原始JSON：

 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(), 
      } 
     }, 
... 

查看編輯plunkr在http://plnkr.co/edit/5xa4z27HbHQbjcfpRLpQ?p=preview