1. 首页
  2. 问答
  3. d3堆栈区域数据格式问题

d3堆栈区域数据格式问题

2016-01-20 41 views
-1

我想用d3创建一个堆栈区域图表，但是我看到的所有示例都有不同的数据格式，那么我就无法弄清楚如何使用我的数据格式绘制图表。d3堆栈区域数据格式问题

例如：http://bl.ocks.org/mbostock/3020685

这里是我的数据：

var data = [{data: [ 
["2016-01-20T05:31:17.000Z", 95.9, {}], 
["2016-01-20T05:31:47.000Z", 95.9, {}], 
["2016-01-20T05:32:17.000Z", 95.4, {}], 
["2016-01-20T05:32:47.000Z", 96.1, {}], 
["2016-01-20T05:33:17.000Z", 95.7, {}], 
["2016-01-20T05:33:47.000Z", 95.9, {}], 
["2016-01-20T05:34:17.000Z", 95.5, {}], 
["2016-01-20T05:34:47.000Z", 95.9, {}], 
["2016-01-20T05:35:17.000Z", 95.8, {}], 
["2016-01-20T05:35:47.000Z", 95.9, {}], 
["2016-01-20T05:36:17.000Z", 95.7, {}], 
["2016-01-20T05:36:47.000Z", 95.7, {}], 
["2016-01-20T05:37:17.000Z", 95.9, {}], 
["2016-01-20T05:37:47.000Z", 95.5, {}], 
["2016-01-20T05:38:17.000Z", 95.4, {}], 
["2016-01-20T05:38:47.000Z", 95.8, {}], 
["2016-01-20T05:39:17.000Z", 96.0, {}], 
["2016-01-20T05:39:47.000Z", 96.1, {}], 
["2016-01-20T05:40:17.000Z", 95.8, {}], 
["2016-01-20T05:40:47.000Z", 96.0, {}], 
["2016-01-20T05:41:17.000Z", 95.9, {}], 
["2016-01-20T05:41:47.000Z", 94.9, {}], 
["2016-01-20T05:42:17.000Z", 95.8, {}], 
["2016-01-20T05:42:47.000Z", 95.9, {}], 
["2016-01-20T05:43:17.000Z", 95.8, {}], 
["2016-01-20T05:43:47.000Z", 96.0, {}], 
["2016-01-20T05:44:17.000Z", 95.7, {}], 
["2016-01-20T05:44:47.000Z", 96.0, {}], 
["2016-01-20T05:45:17.000Z", 95.9, {}], 
["2016-01-20T05:45:47.000Z", 96.0, {}], 
["2016-01-20T05:46:17.000Z", 95.8, {}], 
["2016-01-20T05:46:47.000Z", 96.0, {}], 
["2016-01-20T05:47:17.000Z", 95.7, {}], 
["2016-01-20T05:47:47.000Z", 96.2, {}], 
["2016-01-20T05:48:17.000Z", 95.8, {}], 
["2016-01-20T05:48:47.000Z", 95.9, {}], 
["2016-01-20T05:49:17.000Z", 95.7, {}], 
["2016-01-20T05:49:47.000Z", 95.9, {}], 
["2016-01-20T05:50:18.000Z", 95.7, {}], 
["2016-01-20T05:50:48.000Z", 95.8, {}], 
["2016-01-20T05:51:18.000Z", 95.7, {}], 
["2016-01-20T05:51:48.000Z", 95.9, {}], 
["2016-01-20T05:52:18.000Z", 95.5, {}], 
["2016-01-20T05:52:48.000Z", 95.9, {}], 
["2016-01-20T05:53:18.000Z", 95.8, {}], 
["2016-01-20T05:53:48.000Z", 95.9, {}], 
["2016-01-20T05:54:18.000Z", 95.7, {}], 
["2016-01-20T05:54:48.000Z", 95.9, {}], 
["2016-01-20T05:55:18.000Z", 95.8, {}], 
["2016-01-20T05:55:48.000Z", 95.8, {}], 
["2016-01-20T05:56:18.000Z", 95.6, {}], 
["2016-01-20T05:56:48.000Z", 95.7, {}], 
["2016-01-20T05:57:18.000Z", 95.7, {}], 
["2016-01-20T05:57:48.000Z", 95.8, {}], 
["2016-01-20T05:58:18.000Z", 95.7, {}], 
["2016-01-20T05:58:48.000Z", 95.7, {}], 
["2016-01-20T05:59:18.000Z", 95.6, {}], 
["2016-01-20T05:59:48.000Z", 95.8, {}], 
["2016-01-20T06:00:18.000Z", 95.7, {}], 
["2016-01-20T06:00:48.000Z", 95.7, {}], 
["2016-01-20T06:01:18.000Z", 95.6, {}], 
["2016-01-20T06:01:48.000Z", 95.7, {}], 
["2016-01-20T06:02:18.000Z", 95.8, {}], 
["2016-01-20T06:02:48.000Z", 95.8, {}], 
["2016-01-20T06:03:18.000Z", 95.8, {}], 
["2016-01-20T06:03:48.000Z", 95.8, {}], 
["2016-01-20T06:04:18.000Z", 95.8, {}], 
["2016-01-20T06:04:48.000Z", 95.8, {}], 
["2016-01-20T06:05:18.000Z", 95.7, {}], 
["2016-01-20T06:05:48.000Z", 95.7, {}]], 
label: "a"}, {data: [ 
["2016-01-20T05:31:17.000Z", 95.9, {}], 
["2016-01-20T05:31:47.000Z", 95.9, {}], 
["2016-01-20T05:32:17.000Z", 95.4, {}], 
["2016-01-20T05:32:47.000Z", 96.1, {}], 
["2016-01-20T05:33:17.000Z", 95.7, {}], 
["2016-01-20T05:33:47.000Z", 95.9, {}], 
["2016-01-20T05:34:17.000Z", 95.5, {}], 
["2016-01-20T05:34:47.000Z", 95.9, {}], 
["2016-01-20T05:35:17.000Z", 95.8, {}], 
["2016-01-20T05:35:47.000Z", 95.9, {}], 
["2016-01-20T05:36:17.000Z", 95.7, {}], 
["2016-01-20T05:36:47.000Z", 95.7, {}], 
["2016-01-20T05:37:17.000Z", 95.9, {}], 
["2016-01-20T05:37:47.000Z", 95.5, {}], 
["2016-01-20T05:38:17.000Z", 95.4, {}], 
["2016-01-20T05:38:47.000Z", 95.8, {}], 
["2016-01-20T05:39:17.000Z", 96.0, {}], 
["2016-01-20T05:39:47.000Z", 96.1, {}], 
["2016-01-20T05:40:17.000Z", 95.8, {}], 
["2016-01-20T05:40:47.000Z", 96.0, {}], 
["2016-01-20T05:41:17.000Z", 95.9, {}], 
["2016-01-20T05:41:47.000Z", 94.9, {}], 
["2016-01-20T05:42:17.000Z", 95.8, {}], 
["2016-01-20T05:42:47.000Z", 95.9, {}], 
["2016-01-20T05:43:17.000Z", 95.8, {}], 
["2016-01-20T05:43:47.000Z", 96.0, {}], 
["2016-01-20T05:44:17.000Z", 95.7, {}], 
["2016-01-20T05:44:47.000Z", 96.0, {}], 
["2016-01-20T05:45:17.000Z", 95.9, {}], 
["2016-01-20T05:45:47.000Z", 96.0, {}], 
["2016-01-20T05:46:17.000Z", 95.8, {}], 
["2016-01-20T05:46:47.000Z", 96.0, {}], 
["2016-01-20T05:47:17.000Z", 95.7, {}], 
["2016-01-20T05:47:47.000Z", 96.2, {}], 
["2016-01-20T05:48:17.000Z", 95.8, {}], 
["2016-01-20T05:48:47.000Z", 95.9, {}], 
["2016-01-20T05:49:17.000Z", 95.7, {}], 
["2016-01-20T05:49:47.000Z", 95.9, {}], 
["2016-01-20T05:50:18.000Z", 95.7, {}], 
["2016-01-20T05:50:48.000Z", 95.8, {}], 
["2016-01-20T05:51:18.000Z", 95.7, {}], 
["2016-01-20T05:51:48.000Z", 95.9, {}], 
["2016-01-20T05:52:18.000Z", 95.5, {}], 
["2016-01-20T05:52:48.000Z", 95.9, {}], 
["2016-01-20T05:53:18.000Z", 95.8, {}], 
["2016-01-20T05:53:48.000Z", 95.9, {}], 
["2016-01-20T05:54:18.000Z", 95.7, {}], 
["2016-01-20T05:54:48.000Z", 95.9, {}], 
["2016-01-20T05:55:18.000Z", 95.8, {}], 
["2016-01-20T05:55:48.000Z", 95.8, {}], 
["2016-01-20T05:56:18.000Z", 95.6, {}], 
["2016-01-20T05:56:48.000Z", 95.7, {}], 
["2016-01-20T05:57:18.000Z", 95.7, {}], 
["2016-01-20T05:57:48.000Z", 95.8, {}], 
["2016-01-20T05:58:18.000Z", 95.7, {}], 
["2016-01-20T05:58:48.000Z", 95.7, {}], 
["2016-01-20T05:59:18.000Z", 95.6, {}], 
["2016-01-20T05:59:48.000Z", 95.8, {}], 
["2016-01-20T06:00:18.000Z", 95.7, {}], 
["2016-01-20T06:00:48.000Z", 95.7, {}], 
["2016-01-20T06:01:18.000Z", 95.6, {}], 
["2016-01-20T06:01:48.000Z", 95.7, {}], 
["2016-01-20T06:02:18.000Z", 95.8, {}], 
["2016-01-20T06:02:48.000Z", 95.8, {}], 
["2016-01-20T06:03:18.000Z", 95.8, {}], 
["2016-01-20T06:03:48.000Z", 95.8, {}], 
["2016-01-20T06:04:18.000Z", 95.8, {}], 
["2016-01-20T06:04:48.000Z", 95.8, {}], 
["2016-01-20T06:05:18.000Z", 95.7, {}], 
["2016-01-20T06:05:48.000Z", 95.7, {}]], 
label: "b"}]

所以，请帮助我在用我的数据格式创建堆栈区域图。

来源

2016-01-20 nikunj2512

+1

需要什么格式？ –

+0

@MarkChorley：我编辑了这个问题。你能建议我如何使用我的数据格式创建堆栈区域图吗？ – nikunj2512

回答

2

数据集已经在格式化的形式，所以你不会需要嵌套函数作为example

然而，你将需要合并所有的阵列来获得最大和最小出来。

var ary = []; 
layers.forEach(function(d) { 
    ary.push(d.data);//collecting all data 
}) 

x.domain(d3.extent(d3.merge(ary), function(d) { 
    return new Date(d[0]); 
})); 

y.domain([0, d3.max(d3.merge(ary), function(d) { 
    return d.y0 + d.y; 
})]);

其余部分与示例中相同。

工作代码here

来源

2016-01-20 11:44:50 Cyril

相关问题

 相关问题