D3.js 定制d3堆叠面积图

我尝试过堆叠图表的例子，我喜欢它。我只是不知道如何定制它。例如，如果我需要更改它们的堆栈顺序。有时数据的顺序没有意义。还有，我如何改变颜色

---

谢谢

由于您使用的是D3，您可能会发现使用更高级别的库（称为c3js）来操作图表会更容易一些。下面是一个例子：

堆叠的顺序取决于列数组的顺序：

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

---

您可以使用如下设置尝试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中的数据-

---

但您需要将json数据处理为c3js格式（编写一个函数）

我喜欢这样做，但如何从子文件添加数据？下面是我的json数据示例：{“projectDate”：“2015-10-29”，“Status”：{“Backlog”：23，“Done”：0}，您有更大的示例吗？我想我是想了解你的“Y”值是什么。如果数据的格式更接近JSON，则可以读入数据：