Question

我需要创建一个堆积条形图和线图。我认为d3.js是工作的工具，但我在绑定数据方面遇到了问题。以下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))

会在堆叠的bar chart example中为您提供类似于causes的数据结构。

基本上，d3.values将您的对象与几个数组对齐并转入数组数组。 d3.layout.stack采用二维数组，重新构造它一点点并添加便利函数，使得创建堆积条形图变得更加简单。

Answer 2

我建议你不完全使用JSON，因为它不可流式传输。实际上，图表通常代表大量数据，建议在XHR进度事件的帮助下逐步加载其内容。

由于大多数图表都是表格数据，我认为CSV是用于此目的的更好格式。如果您仍然希望能够像使用JSON一样管理树，请查看VarStream https://github.com/nfroidure/VarStream。

以下是使用可流式格式与使用JSON加载图表的示例：http://server.elitwork.com/experiments/chartstream/index.html

最糟糕的是你的联系，你看XHR Streaming的用处越多。

这个JSON结构是否适合使用d3.js的堆积条形图？

2 个答案: