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

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
• n: 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