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

Question

我需要创建一个堆积的条形图和折线图。 我以为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
    }]
}

}

Answer 1

您需要稍微纠缠数据以获得d3喜欢的格式，但是内置的函数可以为您完成所有工作：

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

将为您提供类似于堆叠条形图示例中的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的有用性。