1

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

{
"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
    }]
}

}

4

2 回答 2

3

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

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

将为您提供类似于causes堆叠条形图示例中的数据结构。

基本上，d3.values将您的对象与几个数组一起转换为数组数组。d3.layout.stack采用该二维数组，稍微重新构造它并添加便利功能，使其更简单地创建堆叠条形图。

于 2013-09-19T12:13:00.167 回答
0

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

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

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

最糟糕的是你的连接，你越能看到 XHR Streaming 的用处。

于 2013-09-19T11:53:21.340 回答