Question

这一直是我遇到的最奇怪的错误......这就是。

所以我为我的大学的数学教授创建了MATLAB程序的Javascript端口，以便在她的网站上使用。因为我不想让大学的IT部门弄乱我允许我运行某种网络服务器，所以我决定在前端编写所有脚本，只需使用带有Plotly的javascript。 js框架。

图表的设置方式是我使用带有不同＆＃34;向量＆＃34;的散点图类型，或者仅使用X和Y轴的数组。 X轴只是从0到＆＃34; timeBox＆＃34;的所有整数。值。

当我尝试填充生成的Y轴数组时，问题出现了。方程本身就是我教授给我的捕食者/猎物关系。我认为这个问题可能存在于方程式中，尽管快速的Python脚本消除了这一点。

我已经将数组构建代码放入函数中，以便可以通过我的updateGraph（）函数调用它们，只要我的任何HTML GUI元素经历＆＃34;更改＆＃34;就会调用它。这是我的HTML：

捕食者和猎物模型

    <strong>Attributes:</strong><br>

    <div style="display:inline-block">
        <label>Prey: </label><input type="number" class = "input" id="preyBox" value="1.1" step="0.1" style="display:inline-block; width: 20%;"/>
    </div> <br>
    <div style="display:inline-block">
        <label>Predator: </label><input type="number" class = "input" id="predBox" value="0.4" step="0.1" style="display:inline-block; width: 20%;"/>
    </div> <br>

    <div style="display:inline-block">
        <label>Time: </label><input type="number" class = "input" id="timeBox" min = "0" value="10" style="display:inline-block; width: 20%;"/>
    </div> <br>

    <div style="display:inline-block">
    <label>r: 0</label><input type="range" class = "input" id="rRange" value = "1.3" min="0" max="10" step="0.1" style="width:20%"/><label>10</label>
    </div><br>
    <div style="display:inline-block">
    <label>u: 0</label><input type="range" class = "input" id="uRange" value = "0.7" min="0" max="1" step="0.1" style="width:20%"/><label>1</label>
    </div><br>
    <div style="display:inline-block">
    <label>K: 0</label><input type="range" class = "input" id="KRange" value = "1" min="0" max="100" style="width:20%"/><label>100</label>
    </div><br>
    <div style="display:inline-block">
    <label>s: 0</label><input type="range" class = "input" id="sRange" value = "0.5" min="0" max="10" step="0.1" style="width:20%"/><label>10</label>
    </div><br>
    <div style="display:inline-block">
    <label>v: 0</label><input type="range" class = "input" id="vRange" value = "1.6" min="0" max="10" step="0.1" style="width:20%"/><label>10</label>
    </div>

并且为我的数组返回正确值的Javascript然后突然返回NaN。我知道它贯穿整个for循环，因为数组的长度仍然与我的x向量的长度相同，这是timeBox值。

var elements = document.getElementsByClassName("input");
for(var i = 0; i < elements.length; i++){
    elements[i].addEventListener("change", updateGraph);
}

var x = {'vector': new Array()}
var y = {
  'preyVector': new Array(),
  'predVector': new Array(),
}

function valueOf(element){
    return parseFloat(document.getElementById(element).value)
}
function adjustX(){
  x.vector = new Array()
    for(var i = 0; i < valueOf("timeBox"); i++){
        x.vector[i] = i
    }
}
function adjustYPrey(){
  y.preyVector = new Array()
    y.preyVector[0] = valueOf("preyBox")
    for(var i = 0; i < x.vector.length - 1; i++){
        //y.preyVector[i+1] = parseFloat(y.preyVector[i]) * (1+(valueOf("rRange")*(1-(parseFloat(y.preyVector[i])/valueOf("KRange"))))) - (valueOf("sRange") * parseFloat(y.preyVector[i]) * parseFloat(y.predVector[i]))
    y.preyVector[i+1] = y.preyVector[i] * (1+valueOf("rRange")*(1-y.preyVector[i]/valueOf("KRange"))) - valueOf("sRange")*y.preyVector[i]*y.predVector[i]
    console.log(y.preyVector[i+1])
    if(isNaN(y.preyVector[i+1])) {
      console.log("something fishy here")
    }
    }

}
function adjustYPred(){
  y.predVector = new Array()
    y.predVector[0] = valueOf("predBox");
    for(var i = 0; i < x.vector.length - 1; i++){
        y.predVector[i+1] = (1-valueOf("uRange"))*y.predVector[i] + valueOf("vRange")*y.predVector[i] * y.preyVector[i]

    }
}

我基本上都尝试了一切。下面是我的Python代码，当然可以完美地运行。对于每个变量，我只需从HTML输入默认值。我可以根据MATLAB实现确认这是有效的。

x = []
for i in range(10):
    x.append(i)
preyInitial = 1.1
predInitial = 0.4

prey = [None]*len(x)
pred = [None]*len(x)

r = 1.3
u = 0.7
K = 1
s = 0.5
v = 1.6

prey[0] = preyInitial
pred[0] = predInitial

def plot():
  for i in range(len(x)-1):
    prey[i + 1] = prey[i] * (1+r*(1-prey[i]/K)) - s*prey[i]*pred[i]
    pred[i + 1] = (1-u)*pred[i] + v*prey[i]*pred[i]

  print("Prey data:\n", prey[:])
  print("Predator data:\n", pred[:])

plot()

非常感谢你的帮助，我坦率地目瞪口呆，我正在为我不想要的Javascript加入一种不必要的仇恨。

Answer 1

答案是盯着我的脸。

将调整Y函数分成两个独立的函数是不明智的，因为它们都是相互依赖的。我仍然不确切地知道为什么Javascript决定在3次迭代后停止，但我的猜测是那个时间周围的一个函数“先行”并导致了差异，所以一个函数乘以一个不存在的值，结果在NaN。

以下是与我在同一条船上的任何人的更新代码：

function adjustY(){
  y.preyVector = new Array()
    y.preyVector[0] = valueOf("preyBox")
  y.predVector = new Array()
    y.predVector[0] = valueOf("predBox");
  for(var i = 0; i < x.vector.length - 1; i++){
        //y.preyVector[i+1] = parseFloat(y.preyVector[i]) * (1+(valueOf("rRange")*(1-(parseFloat(y.preyVector[i])/valueOf("KRange"))))) - (valueOf("sRange") * parseFloat(y.preyVector[i]) * parseFloat(y.predVector[i]))
    y.preyVector[i+1] = y.preyVector[i] * (1+valueOf("rRange")*(1-y.preyVector[i]/valueOf("KRange"))) - valueOf("sRange")*y.preyVector[i]*y.predVector[i]
    y.predVector[i+1] = (1-valueOf("uRange"))*y.predVector[i] + valueOf("vRange")*y.predVector[i] * y.preyVector[i]
    }
}

有趣的是，这几乎就是我的Python代码所做的，但我甚至没有看到它。

Javascript Plotly为Y轴循环在几次迭代后返回NaN

捕食者和猎物模型

1 个答案: