如何迭代繪製堆積條形圖？

Question

所以我的時間序列數據中的陣列看起來像這樣：

var data = [ 

[{date: 2016-01-01 00:00:00, value: 52}, 
{date: 2016-01-02 00:00:00, value: 23}, 
{date: 2016-01-03 00:00:00, value: 42}, 
{date: 2016-01-04 00:00:00, value: 12, 
... 
], 
[{date: 2016-01-01 00:00:00, value: 12}, 
{date: 2016-01-02 00:00:00, value: 42}, 
{date: 2016-01-03 00:00:00, value: 35}, 
{date: 2016-01-04 00:00:00, value: 11}, 
... 
], 
... 
] 

其中數據[i]表示時間序列（數據在00:00:00每天收集），用於這是一個組件整個數據陣列的一部分。

我想要做的是爲每個{日期，值}對象創建堆積條形圖，以便您可以看到代表data[0]的部分，代表data[1], ..., data[data.length-1]的部分。

在d3中這樣做的最好方法是什麼？謝謝！

Answer 1

這裏是你可以考慮的方法大綱只需要JavaScript和SVG：從每個日期值一些常較早的日期值的

1. 減，例如UNIX系統使用1970年1月1日以天計算時間差值，以便您的時間值成爲一系列整數。

2. 在HTML中，指定一個div如：

   <div id="data_display"></div> 
   

3. 在你的腳本（不完全在這裏，但只是爲了獲得基本的想法）：

   var dd = document.getElementByID("data_display"); 
   dd.innerHTML = "<svg width='" + data.length + "' height='100'>" 
   for (i = 0; i < data.length; i++) { 
       dd.innerHTML += "<rect x='" + data[i] + "' y='... 
   } 
   dd.innerHTML += "</svg>" 
   

   在這裏，你只是用數據結構中的適當參數填充每個svg矩形的x，y，寬度和高度。您還可以爲矩形設置填充，筆觸顏色等，以及添加其他svg對象（如文本和線條等）以完成圖表。