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数据绘制多重系列折线图

1 个答案: