在jupyter筆記本中加載外部JavaScript庫

Question

我目前正在嘗試從jupyter筆記本加載外部JavaScript庫（ https://github.com/enkimute/ganja.js ），並將元素添加到我正在使用的筆記本中

這是我的代碼的最小示例的要點： https : //gist.github.com/hugohadfield/7c42d6944b154ba8d73f07059964c730

%%javascript
require.config({paths: {ganja: 'https://unpkg.com/ganja.js@1.0.99/ganja'}});

console.log('Test1');

require(['ganja'],
    function(){                  
        Algebra(2,0,1,()=>{

            // We work in dual space so we define our points to be bivectors. Ganja.js overloads scientific notation to specify basis blades.
            // For readability we create a function that converts 2D euclidean coordinates to their 3D bivector representation.
            var point = (x,y)=>1e12-x*1e02+y*1e01;    

            // Similarly, we can define lines directly. The euclidean line ax + by + c can be specified so :
            var line = (a,b,c)=>a*1e1+b*1e2+c*1e0;

            // Define 3 points.
            var A=point(-1,1), B=point(-1,-1), C=point(1,-1); 

            // Define the line y=x-0.5
            var L=line(-1,1,0.5)

            // Or by joining two points. We define M as a function so it will update when C or A are dragged.
            var M=()=>C&A;

            // Points can also be found by intersecting two lines. We similarly define D as a function for interactive updates. 
            var D=()=>L^M;


            console.log('Test2');


            // We now use the graph function to create an SVG object that visualises our algebraic elements. The graph function accepts
            // an array of items that it will render in order. It can render points, lines, labels, colors, line segments and polygons.
            element.append(this.graph([
                A, "A",         // Render point A and label it.
                B, "B",         // Render point B and label it.
                C, "C",         // Render point C and label them.
                L, "L", M, "M", // Render and label lines.
                D, "D",         // Intersection point of L and M
                0xff0000,       // Set the color to red.
                [B,C],          // Render line segment from B to C. 
                0xffcccc,       // Set the color to light red.
                [A,B,C]         // render polygon ABC.
            ],{grid:true}));

        });

});

筆記本中什么也沒有顯示，並且出現錯誤代碼：ReferenceError：“未定義代數”

我認為require可以處理庫的加載，因此我應該能夠使用該庫中定義的Algebra。 為什么我不能這樣做，將外部庫加載到jupyter筆記本中的正確格式是什么？

Answer 1

修復了此問題，這與庫導出的對象的名稱以及require如何加載它們有關，即固定代碼：

    %%javascript

require.config({paths: {Algebra: 'https://unpkg.com/ganja.js@1.0.99/ganja'}});
require(['Algebra'],function(Algebra){add_graph_to_notebook(Algebra)});

function add_graph_to_notebook(Algebra){
    var output = Algebra(2,0,1,()=>{

            // We work in dual space so we define our points to be bivectors. Ganja.js overloads scientific notation to specify basis blades.
            // For readability we create a function that converts 2D euclidean coordinates to their 3D bivector representation.
            var point = (x,y)=>1e12-x*1e02+y*1e01;    

            // Similarly, we can define lines directly. The euclidean line ax + by + c can be specified so :
            var line = (a,b,c)=>a*1e1+b*1e2+c*1e0;

            // Define 3 points.
            var A=point(-1,1), B=point(-1,-1), C=point(1,-1); 

            // Define the line y=x-0.5
            var L=line(-1,1,0.5)

            // Or by joining two points. We define M as a function so it will update when C or A are dragged.
            var M=()=>C&A;

            // Points can also be found by intersecting two lines. We similarly define D as a function for interactive updates. 
            var D=()=>L^M;

            // We now use the graph function to create an SVG object that visualises our algebraic elements. The graph function accepts
            // an array of items that it will render in order. It can render points, lines, labels, colors, line segments and polygons.
            return this.graph([
                A, 'A',         // Render point A and label it.
                B, 'B',         // Render point B and label it.
                C, 'C',         // Render point C and label them.
                L, 'L', M, 'M', // Render and label lines.
                D, 'D',         // Intersection point of L and M
                0xff0000,       // Set the color to red.
                [B,C],          // Render line segment from B to C. 
                0xffcccc,       // Set the color to light red.
                [A,B,C]         // render polygon ABC.
            ],{grid:true});

        });

    console.log(output);
    element.append(output)
}