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

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>