使用 JSXgraph 制作平面动力系统

如何解决使用 JSXgraph 制作平面动力系统

我正在为一本动态系统书籍开发捕食者-猎物模型。我首先为初始条件创建一个可拖动点。如果我设置第二个点，其坐标是第一个点的函数，我可以拖动一个点并移动另一个点。我试图获得系统的 100 点轨道，但遇到了困难。这是一个适用于单点的小提琴 - https://jsfiddle.net/jford1906/gx86vbtc/21/

  var board = JXG.JSXGraph.initBoard('jxgBox',{
  boundingBox: [-0.1,3,1,-0.1],axis: true,grid: true,showFullscreen: true
});

var p1 = board.create('point',[0.5,0.5],{
  name: 'A'
});

var coords = board.create('text',[0.3,2.8,function() {
    return "Initial Condition: (" + JXG.toFixed(p1.X(),2) + "," + JXG.toFixed(p1.Y(),2) + ")";
  }]
);


var p2 = board.create('point',[function() {
  return 2 * p1.X() * (1 - p1.X()) - 0.5 * p1.X() * p1.Y()
},function() {
  return 4 * p1.Y() / 5 + 1.5 * p1.X() * p1.Y()
}],{
  withLabel: false,color: "blue",opacity: 1,size: 3
});

到目前为止我所尝试的是将轨道的每个点插入一个数组，并让下一个点运行与我在工作示例中所做的相同的坐标函数。它最初显示了整个轨道，但是当我移动初始条件时，轨道中除最后一个之外的所有点都消失了。这个小提琴展示了我是如何尝试做到的 - https://jsfiddle.net/jford1906/jra9g2d3/3/

var i; //indexing variable
var pts = [p1] //Put the initial condition in an array
for (i = 1; i < 100; i++) {
  var p2 = board.create('point',[function() {
    return 2 * pts[i - 1].X() * (1 - pts[i - 1].X()) - 0.5 * pts[i - 1].X() * pts[i - 1].Y()
  },function() {
    return 4 * pts[i - 1].Y() / 5 + 1.5 * pts[i - 1].X() * pts[i - 1].Y()
  }],{
    withLabel: false,size: 1
  });
  pts.push(p2);
}

关于为什么会发生这种情况的想法，或对不同方法的想法？我也试过将整个循环放在一个函数中，并在拖动点时触发该点，但发生了同样的问题。

解决方法

这是 JavaScript 闭包的问题。它已在 https://groups.google.com/g/jsxgraph/c/Y1y1Mbd23ZQ 中得到解答。一个非常快速的解决方法是使用 i 而不是 let 来定义变量 var：

var pts = [p1] //Put the initial condition in an array
for (let i = 1; i < 100; i++) {
    var p2 = board.create('point',[function() {
            return 2 * pts[i - 1].X() * (1 - pts[i - 1].X()) - 0.5 * pts[i - 1].X() * pts[i - 1].Y()
        },function() {
            return 4 * pts[i - 1].Y() / 5 + 1.5 * pts[i - 1].X() * pts[i - 1].Y()
        }],{
            withLabel: false,color: "blue",opacity: 1,size: 1
        });
    pts.push(p2);
}