javascript - 这种 JSON 结构是否适用于使用 d3.js 的堆叠条形图？

Question

我需要创建一个堆叠条形图加折线图。我认为 d3.js 是完成这项工作的工具，但我在绑定(bind)数据时遇到了问题。以下 JSON 格式是否适用于堆栈方法？

{
"response": {
    "qtime": 11,
    "params": {
        "id": "jb8wp1rw41v",
        "format": "json"
    }
},
"series": {
    "twitter": [{
        "date": "2013-08-20",
        "value": 3
    }, {
        "date": "2013-08-21",
        "value": 1
    }, {
        "date": "2013-08-22",
        "value": 4
    }, {
        "date": "2013-08-23",
        "value": 1
    }, {
        "date": "2013-08-24",
        "value": 5
    }, {
        "date": "2013-08-25",
        "value": 9
    }, {
        "date": "2013-08-26",
        "value": 2
    }, {
        "date": "2013-08-27",
        "value": 6
    }, {
        "date": "2013-08-28",
        "value": 5
    }, {
        "date": "2013-08-29",
        "value": 3
    }, {
        "date": "2013-08-30",
        "value": 5
    }, {
        "date": "2013-08-31",
        "value": 8
    }, {
        "date": "2013-09-01",
        "value": 9
    }, {
        "date": "2013-09-02",
        "value": 7
    }],
    "facebook": [{
        "date": "2013-08-20",
        "value": 0
    }, {
        "date": "2013-08-21",
        "value": 1
    }, {
        "date": "2013-08-22",
        "value": 3
    }, {
        "date": "2013-08-23",
        "value": 6
    }, {
        "date": "2013-08-24",
        "value": 10
    }, {
        "date": "2013-08-25",
        "value": 21
    }, {
        "date": "2013-08-26",
        "value": 28
    }, {
        "date": "2013-08-27",
        "value": 21
    }, {
        "date": "2013-08-28",
        "value": 10
    }, {
        "date": "2013-08-29",
        "value": 6
    }, {
        "date": "2013-08-30",
        "value": 0
    }, {
        "date": "2013-08-31",
        "value": 15
    }, {
        "date": "2013-09-01",
        "value": 21
    }, {
        "date": "2013-09-02",
        "value": 1
    }],
    "email": [{
        "date": "2013-08-20",
        "value": 0
    }, {
        "date": "2013-08-21",
        "value": 1
    }, {
        "date": "2013-08-22",
        "value": 1
    }, {
        "date": "2013-08-23",
        "value": 2
    }, {
        "date": "2013-08-24",
        "value": 3
    }, {
        "date": "2013-08-25",
        "value": 5
    }, {
        "date": "2013-08-26",
        "value": 8
    }, {
        "date": "2013-08-27",
        "value": 13
    }, {
        "date": "2013-08-28",
        "value": 5
    }, {
        "date": "2013-08-29",
        "value": 8
    }, {
        "date": "2013-08-30",
        "value": 1
    }, {
        "date": "2013-08-31",
        "value": 1
    }, {
        "date": "2013-09-01",
        "value": 2
    }, {
        "date": "2013-09-02",
        "value": 13
    }],
    "amazon_rank": [{
        "date": "2013-08-20",
        "value": 1001
    }, {
        "date": "2013-08-21",
        "value": 2312
    }, {
        "date": "2013-08-22",
        "value": 2300
    }, {
        "date": "2013-08-23",
        "value": 5179
    }, {
        "date": "2013-08-24",
        "value": 5112
    }, {
        "date": "2013-08-25",
        "value": 2305
    }, {
        "date": "2013-08-26",
        "value": 1902
    }, {
        "date": "2013-08-27",
        "value": 1221
    }, {
        "date": "2013-08-28",
        "value": 1010
    }, {
        "date": "2013-08-29",
        "value": 2588
    }, {
        "date": "2013-08-30",
        "value": 4093
    }, {
        "date": "2013-08-31",
        "value": 4432
    }, {
        "date": "2013-09-01",
        "value": 5002
    }, {
        "date": "2013-09-02",
        "value": 3902
    }],
    "pinterest": [{
        "date": "2013-08-20",
        "value": 17
    }, {
        "date": "2013-08-21",
        "value": 23
    }, {
        "date": "2013-08-22",
        "value": 11
    }, {
        "date": "2013-08-23",
        "value": 13
    }, {
        "date": "2013-08-24",
        "value": 19
    }, {
        "date": "2013-08-25",
        "value": 5
    }, {
        "date": "2013-08-26",
        "value": 17
    }, {
        "date": "2013-08-27",
        "value": 11
    }, {
        "date": "2013-08-28",
        "value": 2
    }, {
        "date": "2013-08-29",
        "value": 3
    }, {
        "date": "2013-08-30",
        "value": 5
    }, {
        "date": "2013-08-31",
        "value": 7
    }, {
        "date": "2013-09-01",
        "value": 19
    }, {
        "date": "2013-09-02",
        "value": 0
    }]
}

Answer 1

您需要稍微整理一下数据以获得 d3 喜欢的格式，但是有内置函数可以为您完成所有工作:

var companies = d3.layout.stack()(d3.values(json.series))

会给你一个类似于 causes 的数据结构，在堆叠 bar chart example 中.

基本上，d3.values正在将您的对象与多个数组一起放入数组中。 d3.layout.stack采用该二维数组，稍微重新构建它并添加便利函数，使创建堆叠条形图变得更加简单。