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，时间尺度必须有足够的时间在域：

时间尺度的变体线性刻度具有时域。 （重点煤矿）

那么，要实现你想要的，你应该交换域和范围是什么？

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

...然后使用invert：

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

这里是一个演示：

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>