在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)
}