D3js：如何使用JSON數據繪制多系列折線圖

Question

我想繪制具有以下json數據的多系列折線圖，其中month是x軸數據，case count y軸和groupName是lines。 我在格式化行數據時遇到問題。 我想要一個多系列折線圖，像這樣。 http://projects.delimited.io/experiments/multi-series/multi-chart.html可以提供任何幫助。

json數據

[
   {
      "groupName":"Casio GzOne",
      "caseCount":8,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"GALAXY",
      "caseCount":80,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"HTC ",
      "caseCount":14,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"LG Mobile Phones",
      "caseCount":27,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"Motorola",
      "caseCount":29,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"Nokia Lumia",
      "caseCount":3,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"Sony Ericsson Xperia",
      "caseCount":4,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"Verizon Ellipsis",
      "caseCount":18,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"iPhone 5",
      "caseCount":29,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"iPhone 6",
      "caseCount":33,
      "caseCreatedMonth":"10-2014"
   },
   {
      "groupName":"Casio GzOne",
      "caseCount":4,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"DEFAULT",
      "caseCount":32,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"GALAXY",
      "caseCount":83,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"HTC",
      "caseCount":14,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"HTC ",
      "caseCount":7,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"LG Mobile Phones",
      "caseCount":14,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"Motorola",
      "caseCount":29,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"Nokia Lumia",
      "caseCount":3,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"Sony Ericsson Xperia",
      "caseCount":3,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"Verizon Ellipsis",
      "caseCount":3,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"iPHONE",
      "caseCount":14,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"iPhone 5",
      "caseCount":13,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"iPhone 6",
      "caseCount":16,
      "caseCreatedMonth":"11-2014"
   },
   {
      "groupName":"DEFAULT",
      "caseCount":15,
      "caseCreatedMonth":"12-2014"
   },
   {
      "groupName":"GALAXY",
      "caseCount":22,
      "caseCreatedMonth":"12-2014"
   },
   {
      "groupName":"Motorola",
      "caseCount":3,
      "caseCreatedMonth":"12-2014"
   },
   {
      "groupName":"Nokia Lumia",
      "caseCount":1,
      "caseCreatedMonth":"12-2014"
   },
   {
      "groupName":"Samsung Galaxy Note",
      "caseCount":4,
      "caseCreatedMonth":"12-2014"
   },
   {
      "groupName":"iPhone 6",
      "caseCount":4,
      "caseCreatedMonth":"12-2014"
   }
]

Answer 1

我已根據http://bl.ocks.org/mbostock/3884955建立了此示例

假設您擁有的數據已經在JSON中，則此示例需要進行一些更改。 有關我的版本，請參見http://jsfiddle.net/henbox/ae5hhv5L/2/embedded/result/ 。

變化主要圍繞操縱數據。 要做到這一點，你要nest數據，這樣的值（ date和casecount ）每上，下坐groupname

processeddata = d3.nest()
    .key(function (d) {
        return d.groupName;
    })
    .entries(phonedata);

之后，通常是更改數據訪問器名稱的情況。 有關nest更多信息，我總是對本頁面有所幫助： http : //bl.ocks.org/phoebebright/raw/3176159/