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中，时间刻度必须有域中的时间：

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

所以，要实现你想要的，你应该交换域和范围...

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

...然后使用invert：

给定范围中的值，返回域中的相应值。

这是一个演示：

＆＃13;

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

＆＃13;

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

＆＃13;

d3.js时间尺度意外行为

1 个答案: