JSFiddle - React, Tailwind, and code Playground

by aaronamran

HTML

<script src="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jsxgraph/distrib/jsxgraph.css">
<button onclick="essai()">try to change the data </button>
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px">
</div>

JavaScript

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

var f1 = [[2,2,3],[2,1,2]];
var Line1 = board.create('curve', f1,{strokecolor:'red', strokeWidth:2});

 Line1.updateDataArray = function() { 
 console.log('test function output');
 
 for (let i = f1[0].length - 1; i >= 0; i--) {
    f1[0].pop();
    }
   for (let i = f1[1].length - 1; i >= 0; i--) {
    f1[1].pop();
    } 
 /* 
  this.dataX = f1[0];
  this.dataY = f1[1]; */
  
  this.dataX = xA;
  this.dataY = yA;
}


let xA = [-4, -2, 3];
let yA = [1,3,2];

 /* 
 function essai() {    
   //f1[0].push( Math.random() * 8 - 4 ); 
   //f1[1].push( Math.random() * 8 - 4 );
   
   for (let i = f1[0].length - 1; i >= 0; i--) {
    f1[0].pop();
   }
   for (let i = f1[1].length - 1; i >= 0; i--) {
    f1[1].pop();
   }
   board.update();  
 }  */