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},
...
],
...
]

其中data [i]表示作为整个数据阵列一部分的组件的时间序列（数据在每天00:00:00收集）。

我想要做的是为每个{date，value}对象创建一个堆积条形图，以便您看到代表data[0]的部分，代表data[1], ..., data[data.length-1]的部分。

在d3中这样做的最佳方法是什么？谢谢！

Answer 1

以下是您可能考虑的只需要javascript和svg的方法的大纲：

从每个日期值中减去一些常数较早的日期值，例如，unix系统使用1970年1月1日来计算时间差值，以便您的时间值成为一系列整数。
在您的html中，指定一个div，例如：
```
<div id="data_display"></div>
```
在你的脚本中（这里不完整，但只是为了得到基本想法）：
```
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对象（如文本和线条等）以完成图表。

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

1 个答案: