JSXGraph - 持久性问题：绘制多个函数

问题描述

我想使用 JSXGraph 代码在 for 循环内绘制多个图形。一切似乎都很好，工作但是当我点击一个点或一条切线时，它们都消失了，因为它们在 for 循环下。我的理解是，我需要像 Java 一样将它们放在一个绘制函数中（并在某处更新），但我无法成功找到它。使用 for 循环绘制持久性多图的正确方法是什么？谢谢。 这是我的代码：

// functions and derivatives 
const board = JXG.JSXGraph.initBoard('jxgBox',{
  boundingBox: [-10,10,-10],axis: true
});

// Macro function plotter
function addCurve(board,func,atts) {
  var f = board.create('functiongraph',[func],atts);
  return f;
}

// Simplified plotting of function
function plot(func,atts) {
  if (atts == null) {
    return addCurve(board,{
      strokecolor: 'green',strokewidth: 2
    });
  } else {
    return addCurve(board,atts);
  }
}
    
// function of x
function f(x) {
  return Math.pow(x,2);
}

//draw f
c = plot(f);
  
//define derivative function,let command provide not to write "var" keyword
// in front of each variables

let ms=[],i=0,m=0,co=[],funcs=[],points=[];

for(i=0; i<11; i++) {
  m=(f(i+1)-f(i-1))/(i+1-i+1);
  co[i]=f(i)-m*i;    
  ms[i]=m;
  console.log("y="+ms[i]+"x+("+co[i]+")");
  
  // Create a function graph for each derivative function df(x) = ms[i]*x+co[i]
  funcs[i] = board.create('functiongraph',[function(x){ return ms[i]*x+co[i];},-10,10]
  );
  
  // Create a constrained point using anonymous function
    points[i] = board.create('point',[i,function () { return ms[i]; }]);  
}

console.log("aha"+c);

解决方法

除了一些关于 let 和 var 的子句外，您的示例代码完全正确。诀窍是在创建导数函数图的 for 循环块中使用 i 定义 m 和 let，但要定义包含斜率 (ms) 的数组和常量值 (co) 与 var。后者使数组持久化，而前者相当于“手动”定义函数，如

funcs[0] = board.create('functiongraph',[
    function(x){ return ms[0] * x + co[0]; },-10,10]
);
funcs[1] = board.create('functiongraph',[
    function(x){ return ms[1] * x + co[1]; },10]
);
...

这是循环的代码：

var c = plot(f);

var ms=[],co=[],funcs=[],points=[];

for (let i=0; i<11; i++) {
  let m = (f(i+1)-f(i-1)) / (i+1-i+1);
  co[i] = f(i) - m * i;    
  ms[i] = m;
  console.log("y=" + ms[i] + "x+(" + co[i] + ")");

  // Create a function graph for each derivative function df(x) = ms[i]*x+co[i]
  funcs[i] = board.create('functiongraph',[function(x){ return ms[i] * x + co[i]; },10]
  );

  // Create a constrained point using anonymous function
  points[i] = board.create('point',[i,function () { return ms[i]; }]);  
}

在https://jsfiddle.net/sp2ntf8v/

现场观看