JSXGraph：如何保持两个图同步

Question

我想要两个图，一个 x(t)-图和一个 v(t)-图。学生应该能够在 v(t) 图中移动一些点。同时，x(t)-graph 中的滑翔机应该同步，以便它们的时间坐标绑定到 v(t)-graph 中的点。

我已经完成了大部分工作，请参阅 jsfiddle。然而，x(t) 图仅在其中的某些元素被触摸时才会更新。但我希望滑翔机与 v(t) 图中的点一起移动。这可能吗？

HTML代码：

<div id="BOARDID0" class="jxgbox" style="width:400px; height:300px">
</div>
<div id="BOARDID1" class="jxgbox" style="width:400px; height:300px">
</div>

JS代码：

const brd0 = JXG.JSXGraph.initBoard('BOARDID0', { 
    boundingbox: [-1, 11, 12, -11], axis:true,
    defaultAxes: {
        x: {withLabel: true, name: 't in s',
            label: {position: 'rt', offset: [-0, 15], anchorX: 'right'} },
        y: {withLabel:true, name: 'x in m',      
            label: {position: 'rt', offset: [+15, -0]} } },
    showCopyright: false, showNavigation: false 
    });

const brd1 = JXG.JSXGraph.initBoard('BOARDID1', { 
    boundingbox: [-1, 6, 12, -6], axis:true,
    defaultAxes: {
        x: {withLabel: true, name: 't in s',
            label: {position: 'rt', offset: [-0, 15], anchorX: 'right'} },
        y: {withLabel:true, name: 'v_x in m/s',      
        label: {position: 'rt', offset: [+15, -0]} } },
    showCopyright: false, showNavigation: false 
    });



function attrPfix(addAttr={}) {
    return {fixed: true, visible: false, withLabel: false, addAttr}; 
}
function attrPmov(addAttr={}) {
    const movAttr = {fixed: false, snapToGrid: true, withLabel: false, addAttr};
    return { ...movAttr, ...addAttr};
}
function attrPsma(addAttr={}) {
    const movAttr = {visible: true, withLabel: false, color:'#4285F4', size: 1};
    return { ...movAttr, ...addAttr};
}
const attrLine = {borders: {strokeColor:'#4285F4', strokeWidth: 3} };
const attrGlid = {visible:false};


var v0=1, t1=1, v1=2, t2=2, v2=3, t3=3, v3=0;

brd1.suspendUpdate();
var lV0 = brd1.create('segment', [[0,-10], [0,10]], {visible:false}),
    lV3 = brd1.create('segment', [[-10,v3], [20,v3]], {visible:false});
var pV0 = brd1.create('glider', [0, v0, lV0], attrPmov({name: "pV0"}) ),
    pV1 = brd1.create('point', [t1, v1], attrPmov({name: "pV1"}) ),
    pV2 = brd1.create('point', [t2, v2], attrPmov({name: "pV2"}) ),
    pV3 = brd1.create('glider', [t3, 0, lV3], attrPmov({name: "pV3"}) ),
    pV01 = brd1.create('point', ["X(pV1)", "Y(pV0)"], attrPsma() ),
    pV12 = brd1.create('point', ["X(pV2)", "Y(pV1)"], attrPsma() ),
    pV23 = brd1.create('point', ["X(pV3)", "Y(pV2)"], attrPsma() )  ;

brd1.create('polygonalchain', [ pV0, pV01, pV1, pV12, pV2, pV23, pV3 ], attrLine);
brd1.unsuspendUpdate();




var x0=1, x1=2, x2=3, x3=4;

brd0.suspendUpdate();
var lX1 = brd0.create('line', [[function(){return pV1.X();},-10], [function(){return pV1.X();},10]], attrGlid),
    lX2 = brd0.create('line', [[function(){return pV2.X();},-10], [function(){return pV2.X();},10]], attrGlid),
    lX3 = brd0.create('line', [[function(){return pV3.X();},-10], [function(){return pV3.X();},10]], attrGlid);
var pX0 = brd0.create('point', [0, x0], attrPsma({fixed: true}) ),
    pX1 = brd0.create('glider', [t1, x1, lX1], attrPmov({face: 'diamond'}) ),
    pX2 = brd0.create('glider', [t2, x2, lX2], attrPmov({face: 'diamond'}) ),
    pX3 = brd0.create('glider', [t3, x3, lX3], attrPmov({face: 'diamond'}) );

brd0.create('polygonalchain', [ pX0, pX1, pX2, pX3 ], attrLine);
brd0.unsuspendUpdate();

Answer 1

设置即可

brd1.addChild(brd0);

在您的示例中创建两个板后，请参阅 https://jsfiddle.net/6xohbeza/。

JSXGraph：如何保持两个图同步

JSXGraph: How to keep two graphs in sync

jsxgraph