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

通过使用时间标尺和{ "port": 3621, "root": ".", "reporter": "Spec", "timeout": 120, "delay": 1000, "tunnel": { "type": "local" }, "launch": { "type": "local" }, "browsers": [{ "browser": "chrome", "args": [ "--headless", "--no-sandbox', "--disable-gpu", "--remote-debugging-port=9222" ] }] }方法，您可以获得真实日期对象，而不仅仅是伪装为日期的字符串。

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

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]);并摆脱for循环：

d3.range

这是演示：

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)

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

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

3 个答案: