javascript - d3 复利债务

Question

我正在尝试创建一个复利建模图，对于每张信用卡，该图将允许用户修改（通过滑块）他们每月支付的金额，并在指数函数图中看到反映的金额——随着它们的增加滑块金额，指数曲线与顶部轴（年）相交的地方，债务将更快还清。

在sliderchange上重绘指数函数或者为增量创建json并在每个函数上转换会更好吗？我还没有看到很多 d3 指数函数的例子。

Answer 1

我不能说这是最好的解决方案，但如果我这样做，我可能会这样做：

我的假设是

1. 复利是根据某个时间间隔计算的（我猜信用卡每月计算一次）
2. 该图将显示未来几年（例如 10 年）的总金额（欠款）。

基于此，我们可以得出要绘制的点数，例如 120（10 年乘以 12 个月）。

然后，通过一个简单的循环，我将创建一个包含 120 个元素的nulls 数组：

var points = [null, null, null, null, null, null.....null, null]; // 120 null's

然后我将创建一个行生成器，它根据数组中的索引计算 X 和 Y。意思是，因为目标是运行这样的东西：

d3.select('svg')
  .append('path')
  .attr('d', lineGenerator(points))// points are the array of nulls

然后我会像这样创建行生成器：

var lineGenerator = d3.svg.line()
  .x(function(d, i) {
    // return a date value calculated as function of i
  })
  .y(function(d, i) {
    // return a compound interest "future value" as a function of i
  })

关键是这样，当用户更改参数（通过滑块）时，无需重建点数组（除非点数必须更改，在这种情况下，我null将从中追加/删除 s ）。甚至传递到行生成器x()和y()方法中的函数也不必改变——只有那些函数内部用于计算输出的参数（即vars）必须改变。