自定义 d3 堆积面积图

Question

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

谢谢！

Answer 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
    }
  },

Answer 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 格式（编写一个函数）

自定义 d3 堆积面积图

customizing d3 stacked area chart

d3.js

charts

area