d3.js - 如何绘制绘制数学函数的自动缩放 D3.js 图表？

Question

我有a working jsfiddle这是我使用 JSXGraph 制作的，JSXGraph 是一个数学函数的图形工具包。我想将其移植到 D3.js 以供个人启发，但我很难开始。

jsfiddle 绘制了 -ke(-x/T) + k 的值，其中 x 是自变量，k 和 t 的值 来自 slider 。

board.create('functiongraph',
  [
    // y = -k * e(-x/t) + k
    function(x) { return -k.Value()*Math.exp(-x/t.Value()) + k.Value(); },
    0
  ]
);

我最困惑的三件事:

• 实际绘制图形及其轴 - 我不清楚应该使用 D3 API 的众多部分中的哪一个，或者应该在什么抽象级别进行操作。

  <

• 当 slider 更改时重新渲染图表，并使图表了解 slider 的值。

• 缩小图形，以便 y = k 定义的渐近线始终可见，并且不在图形的前 15% 内。我现在这样做:

  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];
  }
  

解决这个问题的正确方法是什么？

Answer 1

我threw this example together really quick ，所以不要因为代码质量而责怪我。但它应该为您提供一个良好的起点，帮助您了解如何在 d3 中执行此类操作。我直接在 d3 中实现了所有内容，甚至是 sliders .

正如 @LarKotthoff 所说，关键是你必须循环你的函数并构建你的数据:

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