1. 首頁
  2. 問答
  3. d3堆棧區域數據格式問題

d3堆棧區域數據格式問題

2016-01-20 37 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

相關問題

 相關問題