如何迭代绘制堆积条形图？

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对象（如文本和线条等）以完成图表。