How can I draw an autoscaling D3.js graph that plots a function and takes input from sliders?

[John Feminella]

I have a working jsfiddle [http://jsfiddle.net/jxxf/vbrf5y73/] that I made using JSXGraph [http://jsxgraph.uni-bayreuth.de], a graphing toolkit for mathematical functions. I'd like to port it to D3.js for personal edification, but I'm having a really tough time getting started.

The jsfiddle graphs the value of `-ke(-x/T) + k`, where x is an independent variable and the values of `k` and `t` come from sliders.

    board.create('functiongraph',

      [

        // y = -k * e(-x/t) + k

        function(x) { return -k.Value()*Math.exp(-x/t.Value()) + k.Value(); },

        0

      ]

    );

The three things I'm most stumped on:

* Actually drawing the graph and its axes and grid. It's not clear to me which of the many parts of the D3 API I should be using, or what level of abstraction I should be operating at. For example, it looks like I probably want d3.svg.line, but I don't understand how I actually add that to a graphing surface like a canvas. The d3.svg.line example suggests using "g.append("path").attr("d", line)", but it doesn't explain what the `d` attribute is, why that's important to set, the meaning of the "path" string, what "g" is, and so on. 

* Re-rendering the graph when a slider is changed, and making the graph aware of the value of the sliders.

* Zooming out the graph so that the asymptote defined by y = k is always visible and not within the top 15% of the graph. I do this now with:

        function getAestheticBoundingBox() {

          var kMag = k.Value();

          var tMag = t.Value();

          var safeMinimum = 10;

          var limit = Math.max(safeMinimum, 1.15 * Math.max(k.Value(), t.Value()));

      

          return [0, Math.ceil(limit), Math.ceil(limit), 0];

        }

Overall, I'm confused about which part of the big surface of D3 I should be looking at most closely. I've tried looking at some examples on http://bl.ocks.org/, and they were all pretty awesome, but none of them seemed to be a close fit for what I was doing. Likewise, I worked through a few of the tutorials, but they didn't really address my problem, and I don't feel like I'm any closer to a solution. It's especially frustrating because I know that D3 is much more powerful than JSXGraph, but whereas it took me about 90 minutes to put the jsfiddle together, I still can't render anything interesting in D3 for my use case after hours of work.

What's the right way for me to tackle this?

best,

John Feminella

http://jxf.me