Создание графика f(x) и f (xa) с использованием графика JSX

Question

Как можно построить график f (x) (введенный пользователем) и график f (xa), где значение a получено от ползунка, с помощью jsx graph? Например, если пользователь вводит xx и значение a from ползунка равно 1, то на доске jsx будут два графика: один для x и другой для (x-1)(x-1)?

Answer 1

Получение ответа из раздела Изменение функции в текстовом поле - это не изменение графика, а одновременный график функции, предоставленной пользователем. f(x) и функция f(x-a) который зависит от слайдера, может выглядеть так:

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-6, 12, 8, -6], axis: true});
a = board.create('slider', [[-4,7], [4,7], [-10, 1,10]], {name:'a'});

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

    board.removeObject('f'); // Remove element with name f
    board.removeObject('g'); // Remove element with name g
    curve = board.create('functiongraph', [f, -10, 10], {name:'f'});
    curve2 = board.create('functiongraph', [
        function(x) {
            return f(x - a.Value());
        }, -10, 10], {name:'g', strokeColor: 'red'});
};

doPlot();

Это означает, что уловка состоит в том, чтобы определить вторую функцию, которая возвращает f(x-a), Смотрите https://jsfiddle.net/qmp0qdvv/1/. Как и в вышеупомянутой другой проблеме, этот пример позволяет вводить простой математический синтаксис вместо кода JavaScript с помощью анализатора JessieCode JSXGraph.