自定义 d3 堆积面积图答案

【问题标题】：customizing d3 stacked area chart自定义 d3 堆积面积图
【发布时间】：2016-04-18 13:55:12
【问题描述】：

我已经尝试过堆叠图表的示例http://bl.ocks.org/mbostock/3885211，我喜欢它。我只是不确定如何自定义它。例如，如果我需要更改它们堆叠的顺序。有时数据的顺序排列没有意义。另外，如何改变颜色？

谢谢！

【问题讨论】：

【解决方案1】：

由于您使用的是 D3，您可能会发现使用更高级别的库（称为 c3js）来操作图表会更容易一些。这是一个例子：http://c3js.org/samples/chart_area_stacked.html

堆叠的顺序取决于您对列数组的排序方式：

var chart = c3.generate({
  data: {
    columns: [
        ['data1', 300, 350, 300, 0, 0, 120],
        ['data2', 130, 100, 140, 200, 150, 50]
      ],
    types: {
        data1: 'area-spline',
        data2: 'area-spline'
        // 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
           },
    groups: [['data1', 'data2']]
        }
    });

这是一个更大的数据集：

[
  {
    "projectDate": "2015-10-29",
    "status": {
      "Backlog": 23
    }
  },
  {
    "projectDate": "2015-10-29",
    "status": {
      "Backlog": 23
    }
  },
  {
    "projectDate": "2015-10-30",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-30",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-31",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-10-31",
    "status": {
      "Backlog": 49,
      "In Progress": 9
    }
  },
  {
    "projectDate": "2015-11-01",
    "status": {
      "Backlog": 44,
      "In Progress": 11
    }
  },
  {
    "projectDate": "2015-11-01",
    "status": {
      "Backlog": 44,
      "In Progress": 11
    }
  },
  {
    "projectDate": "2015-11-02",
    "status": {
      "Backlog": 39,
      "In Progress": 19
    }
  },
  {
    "projectDate": "2015-11-02",
    "status": {
      "Backlog": 39,
      "In Progress": 19
    }
  },
  {
    "projectDate": "2015-11-03",
    "status": {
      "In Progress": 20,
      "Backlog": 40,
      "Selected for Development": 1
    }
  },
  {
    "projectDate": "2015-11-03",
    "status": {
      "In Progress": 20,
      "Backlog": 40,
      "Selected for Development": 1
    }
  },
  {
    "projectDate": "2015-11-04",
    "status": {
      "In Progress": 21,
      "Backlog": 49
    }
  },
  {
    "projectDate": "2015-11-04",
    "status": {
      "In Progress": 21,
      "Backlog": 49
    }
  },
  {
    "projectDate": "2015-11-05",
    "status": {
      "Backlog": 38,
      "In Progress": 31,
      "Merge Candidate": 5
    }
  },
  {
    "projectDate": "2015-11-05",
    "status": {
      "Backlog": 38,
      "In Progress": 31,
      "Merge Candidate": 5
    }
  },
  {
    "projectDate": "2015-11-06",
    "status": {
      "UX Review": 6,
      "In Progress": 27,
      "Selected for Development": 2,
      "Backlog": 35,
      "Merge Candidate": 2
    }
  },

【讨论】：

我喜欢它的工作原理，但我将如何从子文件中添加数据？这是我的 json 数据的示例：
{ "projectDate": "2015-10-29", "Status": { "Backlog": 23, "Done": 0 } },
你有更大的样本吗？我想我正在尝试了解您的“Y”值是什么。如果数据更多是 JSON 格式，则可以读取您的数据：c3js.org/reference.html#data-json

【解决方案2】：

您可以尝试使用以下设置的 c3js：

    data: {
    columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 333, 100, 140, 200, 150, 50],
        ['data3', 130, 150, 200, 300, 200, 100]
    ],
    type: 'bar',
    // Change to 'line', 'spline', 'step', 'area', 'area-step' for getting likely type
    groups: [
        ['data1', 'data2', 'data3']
    ]
},
bar: {
    width: {
        ratio: 1
    }
}

例如，您的数据来自 json - https://jsfiddle.net/ea54hxgy/

但是你需要将你的 json 数据处理成 c3js 格式（写一个函数）

【讨论】：