javascript - d3.js 时间尺度意外行为

Question

我在 for 循环内创建了一个对象数组。在每个对象内部，我都有一个键值对来存储时间。为了实现这一点，我在 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 link

Answer 1

这并不意外:在 D3 中，时间刻度必须具有域中的时间:

Time scales are a variant of linear scales that have a temporal domain. (emphasis mine)

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

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

...然后使用 invert :

Given a value from the range, returns the corresponding value from the domain.

这是一个演示:

  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>