D3.js时间尺度意外行为

Question

我在循环中创建了一系列对象。在每个对象内部，我都有一个键值对存储时间。为了实现这一目标，我使用了D3.js的时间尺度。但是我没有像我预期的那样得到结果。代码是

var xscale = d3.scaleTime()
    .range([new Date(2000, 0, 1), new Date(2000, 0, 2)])
    .domain([0, 288]);
var dataprovider = [];
var ti = 0;
for (var k = 0; k < 288; k++) {
  var t = xscale(ti++);
  dataprovider.push({
    x: t,
    y: Math.random() * 100
  });
}
console.log(dataprovider);

jsfiddle链接

Answer 1

这不是出乎意料的：在D3中，时间尺度必须有时间在域中：

时间尺度是具有时间域的线性量表的变体。（强调我的）

因此，要实现想要的目标，您应该交换域和范围...

var xscale = d3.scaleTime()
    .domain([new Date(2000, 0, 1), new Date(2000, 0, 2)])
    .range([0, 288]);

...然后使用倒置：

给定一个范围的值，从域返回相应的值。

这是一个演示：

  var xscale = d3.scaleTime()
    .domain([new Date(2000, 0, 1), new Date(2000, 0, 2)])
    .range([0, 288]);
    
  var dataprovider = [];
  var ti = 0;
  for (var k = 0; k < 288; k++) {
    var t = xscale.invert(ti++);
    dataprovider.push({
      x: t,
      y: Math.random() * 100
    });
  }
  console.log(dataprovider);

<script src="https://d3js.org/d3.v4.min.js"></script>