Estoy tratando de que los estudiantes puedan arrastrar los tres puntos para mostrar las tres intersecciones de una cuadrática (con raíces reales) y luego hacer que jsxgraph dibuje la parábola que coincida con esos tres puntos. Tengo las matemáticas funcionando sin dramas, pero no puedo convencerlo de que se actualice a medida que se mueven los puntos.
Aquí está el violín en el que he estado trabajando.
Puedo hacer que el gráfico se vuelva a trazar cuando arrastro los puntos usando el método .on('arrastrar' pero no puedo averiguar cómo borrar los gráficos anteriores (¿también parece que no debería tener que usar ese método? ).
const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 5, 5, -5], axis: true }); var xi1 = board.create('point', [2, 1], { visible: true, snapToGrid: true, snapSizeX: 0.1, snapSizeY: 0.1 }); var xi2 = board.create('point', [-2, 1], { visible: true, snapToGrid: true, snapSizeX: 0.1, snapSizeY: 0.1 }); var el0 = board.create('line', [ [0, 0], [0, 1] ], { strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0' }); var yi = board.create('glider', [0, 1, el0], { name: 'Y-Intercept', visible: true, snapToGrid: true, snapSizeX: 0.1, snapSizeY: 0.1 }); yi.on('drag', function() { board.removeObject(f); var p = parseFloat(xi1.X()); var q = parseFloat(xi2.X()); var r = parseFloat(yi.Y()); var a = r / (p * q); var b = (r * (q + p)) / (p * q); var c = r; var func = a.toString() + '*x^2+' + b.toString() + '*x+' + c.toString(); var f = board.jc.snippet(func, true, 'x', true); var graph = board.create('functiongraph', [f, -10, 10], { strokeColor: '#003399', strokeWidth: 2 }); var txt1 = board.create('text', [3, 4, function() { return "The current equation is:" + func; }]); });Un colega me mostró una forma alternativa de hacer que la función dibuje sin usar el método jc.snippet. Aquí está el violín .
Básicamente addcurve hace lo que quiero.
const board = JXG.JSXGraph.initBoard('jxgbox', { boundingbox: [-5, 5, 5, -5], axis: true }); var el1 = board.create('line', [ [0, 0], [1, 0] ], { strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'y=0' }); var el0 = board.create('line', [ [0, 0], [0, 1] ], { strokeOpacity: .2, strokeColor: '#000000', fixed: true, name: 'x=0' }); var xi1 = board.create('glider', [2, 0, el1], { name: 'X-intercept2', visible: true, snapToGrid: true, snapSizeX: 0.1, snapSizeY: 0.1 }); var xi2 = board.create('glider', [-2, 0, el1], { name: 'X-intercept1', visible: true, snapToGrid: true, snapSizeX: 0.1, snapSizeY: 0.1 }); var yi = board.create('glider', [0, 1, el0], { name: 'Y-Intercept', visible: true, snapToGrid: true, snapSizeX: 0.1, snapSizeY: 0.1 }); // Macro function plotter function addCurve(board, func, atts) { var f = board.create('functiongraph', [func], atts); return f; } // Simplified plotting of function function plot(func, atts) { if (atts==null) { return addCurve(board, func, {strokewidth:2}); } else { return addCurve(board, func, atts); } } function f(x) { var q = (-1)*parseFloat(xi1.X()); var p = (-1)*parseFloat(xi2.X()); var r = parseFloat(yi.Y()); var a = r / (p * q); var b = (r * (q + p)) / (p * q); var c = r; var func = a * x * x + b * x + c; return func; } c = plot(f);