Блог

Главная - Вопросы по программированию - JSXGraph: при создании графика данных, какой тип ввода принимает элемент ‘curve’?

JSXGraph: при создании графика данных, какой тип ввода принимает элемент ‘curve’?

#jsxgraph

#jsxgraph

Вопрос:

(Я удалил более раннюю версию этого вопроса, когда обнаружил, что ошибся с javascript в jsfiddle. Надеюсь, на этот раз подобной ошибки не будет)

Документация элемента ‘curve’:
http://jsxgraph.org/docs/symbols/Curve.html

Я создал этот jsfiddle для подтверждения документации:
https://jsfiddle.net/Cleonis/7ocrm629/

Я создал этот jsfiddle для эксперимента:
https://jsfiddle.net/Cleonis/2jgtq3L4/

Я подтвердил, что элемент ‘curve’ принимает следующую запись массива в качестве входных данных:

 var cpArrayX2 = [-1.0, -0.9, -0.8, -0.7, -0.6, -0.5, -0.4, -0.3, -0.2, -0.1, 0.0];
var cpArrayY2 = [0.0, 0.1434, 0.2861, 0.4262, 0.5608, 0.6854, 0.7952, 0.8858, 0.9519, 0.9898, 1.0];

var trajectory = board.create('curve', 
    [cpArrayX2, cpArrayY2],
  {dash:2}
);

Затем я попробовал следующий способ заполнения массивов:

 var cpArrayX = [];
var cpArrayY = [];
 

cpArrayX[0]  = -1.0;
cpArrayX[1]  = -0.9;
// continuing to cpArrayX[20]

cpArrayY[0]  =  0.0;
cpArrayY[1]  = function() {return 0.1434};
// continuing to cpArrayY[20]

var cpArray = [];  // cpArray for: 'control point array'

cpArray[0] = board.create('point', 
  [-1.0, 0.0], 
);
cpArray[1] = board.create('point', 
  [-0.9, cpArrayY[1]], 
);
// continuing to cpArray[20]

var trajectory = board.create('curve', 
    [cpArrayX, cpArrayY],
  {strokeWidth:4}
);

Что происходит, так это то, что элемент ‘point’ принимает ввод массива, но, похоже, элемент ‘curve’ не принимает ввод массива. Он молча завершается ошибкой.

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

Но если массив был заполнен, я не могу объяснить, почему JSXGraph рисует кривую с помощью [cpArrayX2, cpArrayY2] в качестве входных данных, но не с помощью [cpArrayX, cpArrayY] в качестве входных данных.

ПОСЛЕДУЮЩЕЕ РЕДАКТИРОВАНИЕ:
https://jsxgraph.org/wiki/index.php/Curve

На приведенной выше вики-странице есть описание графика динамических данных. Пользователь перетаскивает точку, и это изменяет амплитуду графика. Это то, что мне нужно. Однако для реализации в этом примере требуется математическая функция, и то, что у меня есть для ввода, — это массив y-координат.

ПОЗЖЕ ПОЗЖЕ РЕДАКТИРОВАТЬ:
я снабдил координаты y серией операторов ‘if else’; элемент ‘curve’ теперь работает. Итак: координата y типа ‘график данных’ принимает динамический ввод. Я предполагаю, что только ввод по координате x не принимает динамический ввод.

Ответ №1:

Для этого вы можете воспользоваться следующим методом updataDataArray . Вот пример создания 5-угольника с центральной точкой перетаскивания A :

 const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 5, 5, -5], axis:true
});

var A = board.create('point', [1, 1]);
var c = board.create('curve', [[], []]);
c.updateDataArray = function() {
    var i,
        N = 5,
        r = 3;
    this.dataX = [];
    this.dataY = [];

    for (i = 0; i < N; i  ) {
        this.dataX[i] = A.X()   Math.cos(i * 2 * Math.PI / N) * r;
        this.dataY[i] = A.Y()   Math.sin(i * 2 * Math.PI / N) * r;
    }
    this.dataX[i] = A.X()   Math.cos(0) * r;
    this.dataY[i] = A.Y()   Math.sin(0) * r;
};

board.update();

В этом методе вы можете создавать произвольные точки данных, которые определяют кривую.
x-координаты этих точек хранятся в this.dataX , y-координаты this.dataY . Смотрите его в прямом эфире на https://jsfiddle.net/mprtcnuL /

Метки: ,