时间戳

首页 > 解决方案 > JSXGraph：创建数据图时，“曲线”元素接受什么类型的输入？

jsxgraph - JSXGraph：创建数据图时，“曲线”元素接受什么类型的输入？

问题描述

（当我发现我在 jsfiddle 中弄错了 javascript 时，我删除了这个问题的早期版本。我希望这次没有类似的错误）

“曲线”元素的文档：http:
//jsxgraph.org/docs/symbols/Curve.html

我创建了这个 jsfiddle 来确认文档：
https ://jsfiddle.net/Cleonis/7ocrm629/


我创建了这个 jsfiddle 进行实验：
https ://jsfiddle.net/Cleonis/2jgtq3L4/

我确认“曲线”元素接受以下数组表示法作为输入：

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}
);

发生的情况是元素“点”确实接受了数组输入，但似乎“曲线”元素不接受数组输入。它默默地失败了。

我假设数组确实被填充了，因为“点”元素确实被绘制了。

但是如果数组确实被填充了，我无法解释为什么 JSXGraph 确实使用 [cpArrayX2, cpArrayY2] 作为输入来绘制曲线，而不是使用 [cpArrayX, cpArrayY] 作为输入。



后期编辑：
https ://jsxgraph.org/wiki/index.php/Curve

在上面的 wiki 页面上有一个动态数据图的描述。用户拖动一个点并改变绘图的幅度。这就是我需要的。但是，该示例中的实现需要一个数学函数，而我的输入是 y 坐标数组。

稍后编辑：
我为 y 坐标提供了一系列“if else”语句；元素“曲线”现在有效。所以：“数据图”类型的 y 坐标确实接受动态输入。我猜它只是不接受动态输入的x坐标输入。

标签： jsxgraph

解决方案

为此，您可以使用方法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/现场查看

推荐阅读