更改文本框中的函数不会更改图形

Question

我正在尝试创建一个 fiddle，它可以让我更改图形并输入显示在图形下方的文本。我正在为此使用 jsxgraph 库。

http://jsxgraph.uni-bayreuth.de/wiki/index.php/Change_Equation_of_a_Graph#JavaScript_Part

以上是当您更改显示图表中的文本中的函数时有效的示例。

我正在尝试使用 fiddle 的相同示例。但它不起作用。

初始代码：

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});
eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
graph = board.create('functiongraph', [function(x){ return f(x); },-10, 10]);

如何让它发挥作用？

Answer 1

这是一个特定于 jsfiddle 的问题。如果把函数的声明doIt改成

doIt = function (){
  //redefine function f according to the current text field value
  eval("function f(x){ return "+document.getElementById("eingabe").value+";}");
  //change the Y attribute of the graph to the new function 
  graph.Y = function(x){ return f(x); };
  //update the graph
  graph.updateCurve();
  //update the whole board
  board.update();
};

而不是

function doIt() {
     ...
}

然后示例运行。

但我要强调的是，同时 JSXGraph 带有它自己的解析器 JessieCode（参见 https://github.com/jsxgraph/JessieCode），它允许输入常见的数学语法而不是 JavaScript 语法。这意味着，用户可以输入 sin(x) 而不是 Math.sin(x)。此外，还有幂运算符 ^，即可以输入 x^2.

而不是 Math.pow(x,2)

使用 JessieCode 进行函数绘图的最小示例如下所示，请参阅 https://jsfiddle.net/eLs83cs6/

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});

doPlot = function() {
    var txtraw = document.getElementById('input').value, // Read user input
        f = board.jc.snippet(txtraw, true, 'x', true), // Parse input with JessieCode
        curve;

    board.removeObject('f'); // Remove element with name f
    curve = board.create('functiongraph', [f, -10, 10], {name:'f'});
};

doPlot();

Ann 的额外副作用是，使用 JessieCode 解析数学语法可以防止 XSS 攻击，如果允许用户提供任意 JavaScript，这种攻击很容易发生代码作为输入。

更改文本框中的函数不会更改图形

Changing the function in the text box is not changing the graph

javascript

jsxgraph