JSXGraph: как синхронизировать два графика

Я хотел бы иметь два графика: x(t)-граф и v(t)-граф. Студенты должны уметь перемещать некоторые точки на v(t)-графе. При этом планеры на x(t)-графе должны быть синхронизированы так, чтобы их временные координаты были привязаны к точкам на v(t)-графе.

У меня большая часть работает, см. 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();