Question

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

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

这些是汇总值。第一个值是时间（168 = 7天* 24小时）。 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。

我无法解决一些问题：

如何每天24小时向x轴添加7天？
如何在我的栏之间设置轴的刻度（因为我的栏表示小时之间的值，所以第一个栏表示星期一00:00到星期一00:59之间发生的所有事情）？

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

Answer 1

您可以创建一个新阵列，根据每个内部数组的第一个值设置开始日期和添加小时。点击＆＃34;运行代码段＆＃34;查看带日期的新数组。

＆＃13;

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);

＆＃13;

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

＆＃13;

此处(2016, 01, 01)只是一个示例，您必须根据自己的需要进行设置。

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

＆＃13;

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);

＆＃13;

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

＆＃13;

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

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

1 个答案: