在给定已知索引范围的日期之间进行插值

Question

我正在尝试填充一些硬编码的"数据"。x 轴是以年为单位的时间，y 轴是数值。该图将类似于指数函数。这是我到目前为止所拥有的，您会注意到索引范围(表示为 n(是 100：

var data = [];
var n = 100;
var a = 1;
var b = 2;
for(var k = 0; k <100; k++) {
data.push({x: ???, y: a * Math.pow(b, 0.01 * k)});
}

我不太清楚如何在日期之间插值。我的第一次尝试是从我的第一年开始，增加增量，然后在一年内投入String()，但我最终得到了一些不再是日期的东西。数学运算不知道我想要一个日期输出，所以我想这是我的错。我还没有想到更好的方法。

问题：

如何在 for 循环中的 javascript 中插入两个日期？

• 开始时间： 1800-01-01
• 结束时间： 2020-01-01
• 编号： 100

Answer 1

您可以使用时间刻度和invert方法获取真实的日期对象，而不仅仅是伪装成日期的字符串。

为此，我们只需要设置变量...

var n = 100;
var a = 1;
var b = 2;
var startDate = "1800-01-01";
var endDate = "2020-01-01";

。和解析器：

var parser = d3.timeParse("%Y-%m-%d");

现在我们设置比例。重要的部分是设置它的范围从0到100.这是我们将与invert一起使用的范围，以获取相应的日期：

var scale = d3.scaleTime()
.domain([parser(startDate), parser(endDate)])
.range([0, n]);

最后，我们创建数组。我们可以使用d3.range并摆脱 for 循环：

var data = d3.range(n).map(function(k) {
return {
x: scale.invert(k),
y: a * Math.pow(b, 0.01 * k)
}
});

这是演示：

var n = 100;
var a = 1;
var b = 2;
var startDate = "1800-01-01";
var endDate = "2020-01-01";
var parser = d3.utcParse("%Y-%m-%d");
var scale = d3.scaleTime()
.domain([parser(startDate), parser(endDate)])
.range([0, n]);
var data = d3.range(n).map(function(k) {
return {
x: scale.invert(k),
y: a * Math.pow(b, 0.01 * k)
}
})
console.log(data)

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

Answer 2

由于它只是递增的年份，因此它是日期并不重要 - 只需在推送到数组之前格式化字符串即可

let startYear = 1800;
const endYear = 2020;
const years = [];
for(startYear; startYear <= endYear; startYear++) {
	years.push(`${startYear}-01-01`)    
}
console.log(years)

Answer 3

使用可以将间隔与专用的 js 日期/时间库一起使用：

https://moment.github.io/luxon/docs/class/src/interval.js~Interval.html

https://momentjs.com/

https://github.com/iamkun/dayjs

或 https://www.htmlgoodies.com/html5/javascript/calculating-the-difference-between-two-dates-in-javascript.html