javascript - d3 复利债务

Question

我正在尝试创建一个复利建模图，对于每张信用卡，用户都可以修改(通过 slider )他们每月支付的金额，并在指数函数图中看到它的反射(reflect) --当他们增加 slider 数量时，指数曲线与顶轴(年)相交的地方，债务将很快得到偿还。

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

Answer 1

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

我的假设是

1. 复利是根据某个时间间隔计算的(我猜信用卡是按月计算的)
2. 该图表将显示 future 几年(比如说 10 年)的总金额(欠款)。

在此基础上，我们可以得出要绘制图形的点数，例如120(10 年乘以 12 个月)。

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

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
  })

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