如何使用 d3.format 或 d3.time.format 映射一整周（周一至周日）？

Question

我对 d3.js 很陌生。我正在使用 NVD3 (http://nvd3.org/)（因此我使用 d3v3，而不是 v4）来生成图表。我的输入数据是一个 JSON 数组，如下所示：

data = [[0,43],[1,32],[2,4],...,[167,21]]

这些是聚合值。第一个值是时间 (168=7days*24h)。 0 代表 00:00 到 00:59 之间的任何星期一，1 代表星期一 1:00-1:59，26 代表星期二 2:00-2:59，167 代表星期日 23:00-00:00。我确实不想用特定日期（例如星期二，16-08-30）来表示特定的一周。这就是为什么我使用一周包含的 168 小时。 我正在尝试将这些值映射到图表的 x 轴刻度上，我认为函数 d3.format 和 d3.time.format 是正确的。但我真的做不到。 结果应如下所示：Chart Picture。

---

有些问题我无法解决：

1. 如何在 x 轴上添加 7 天，每天 24 小时？
2. 如何设置我的条之间的轴刻度（因为我的条代表小时之间的值，所以第一个条代表星期一 00:00 和星期一 00:59 之间发生的一切）？

注意：我不想代表特定的一周（例如 16-08-22 到 16-08-28）！ 如果有人可以帮助我找到解决方案，我将不胜感激！非常感谢！ =)

Answer 1

您可以创建一个新数组，设置开始日期并根据每个内部数组的第一个值添加小时数。点击“run code sn -p”查看新的日期数组。

var data = [[0,43],[1,32],[2,4],[3,11],[4,42],[5,34],[6,14]];

var newData = [];

data.forEach(function(d){
  var firstDate = new Date(2016, 01, 01);
  var tempDate = new Date(firstDate.setHours(firstDate.getHours()+d[0]))
  tempArray = [tempDate,d[1]];
  newData.push(tempArray);
});

console.log(newData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

这里(2016, 01, 01)只是一个例子，你需要根据自己的需要进行设置。

更好的是，您可以将一个对象推送到newData，使其成为一个对象数组：

var data = [[0,43],[1,32],[2,4],[3,11],[4,42],[5,34],[6,14]];

var newData = [];

data.forEach(function(d){
  var firstDate = new Date(2016, 01, 01);
  var tempDate = new Date(firstDate.setHours(firstDate.getHours()+d[0]))
  tempObject = {date: tempDate, value: d[1]};
  newData.push(tempObject);
});

console.log(newData);

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

这样，您可以使用newData 作为您的数据集，相应地使用d.date 和d.value。