score:3

Accepted answer

I threw this example together really quick, so don't ding me on the code quality. But it should give you a good starting point for how you'd do something like this in d3. I implemented everything in straight d3, even the sliders.

As @LarKotthoff says, the key is that you have to loop your function and build your data:

// define your function
var func = function(x) {
  return -sliders.k() * Math.exp(-x / sliders.t()) + sliders.k();
},
// your step for looping function
step = 0.01;

drawPlot();

function drawPlot() {

  // avoid first callback before both sliders are created
  if (!sliders.k ||
      !sliders.t) return;

  // set your limits
  var kMag = sliders.k();
  var tMag = sliders.t();
  var safeMinimum = 10;
  var limit = Math.max(safeMinimum, 1.15 * Math.max(kMag, tMag));

  // generate your data
  var data = [];
  for (var i = 0; i < limit; i += step) {
    data.push({
      x: i,
      y: func(i)
    })
  }

  // set our axis limits
  y.domain(
    [0, Math.ceil(limit)]
  );
  x.domain(
    [0, Math.ceil(limit)]
  );

  // redraw axis
  svg.selectAll("g.y.axis").call(yAxis);
  svg.selectAll("g.x.axis").call(xAxis);

  // redraw line
  svg.select('.myLine')
    .attr('d', lineFunc(data))
}

Related Query