D3js：如何使用 json 数据绘制多系列折线图

Question

我想用下面的 json 数据绘制多系列折线图，其中月份是 x 轴数据，个案计数 y 轴和 groupName 是线。我在为行格式化数据时遇到问题。我想要一个像这样的多系列折线图。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/

D3js：如何使用 json 数据绘制多系列折线图

D3js: how to plot multiseries line chart with json data

javascript

d3.js