Изменение функции в текстовом поле не меняет график

Question

Я пытаюсь создать скрипку, которая позволит мне изменять график и вводить текст, отображаемый под графиком. Я использую библиотеку jsxgraph для этого.

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

Выше приведен пример, который работает, когда вы меняете функцию в отображаемом текстовом графике, также меняется.

Тот же пример, который я пробую с скрипкой. Но это не работает.

https://jsfiddle.net/me55dw4h/30/

исходный код:

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. Это означает, что вместо Math.sin(x) пользователь может просто ввести sin(x), Дополнительно есть оператор питания ^ т.е. вместо Math.pow(x,2) можно набрать 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();

Дополнительным побочным эффектом Энна является то, что синтаксический анализ математического синтаксиса с помощью JessieCode предотвращает атаки XSS, что было бы легко возможным, если бы пользователям разрешалось вводить произвольный код JavaScript в качестве входных данных.