我正在使用Pixi.Js和使用闪电光环组件中的静态资源的图形学。在使用这些库生成图形时，我遇到了这个异常ResizeObserver 不是构造函数 如果我使用脚本标记并在 html 文件中运行它，代码工作正常。
这是 cmp 文件中的代码：
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAc tion" access="global" >
<head>
<title>PIXI</title>
<ltng:require styles = '{!$Resource.pixiStyle}' scripts="{!join(',',$Resource.PixiGraph,
$Resource.graphology
)}"
afterScriptsLoaded="{!c.scriptsLoaded}"/>
</head>
<body>
<div style = ' width: 100vw;
height: 100vh' aura:id="graph" class = 'graphClass'></div>
</body>
</aura:component>
这是js文件：
({
scriptsLoaded : function(component, event, helper) {
alert('script lodead');
debugger;
const colors = [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
];
const graph = new graphology.Graph();
const { nodes, links } = {
nodes: [
{ id: "Myriel", group: 1 },
{ id: "Napoleon", group: 1 },
{ id: "Mlle.Baptistine", group: 1 },
{ id: "Mme.Magloire", group: 1 },
{ id: "Mlle.Vaubois", group: 5 },
{ id: "Lt.Gillenormand", group: 5 },
{ id: "Montparnasse", group: 4 },
{ id: "Toussaint", group: 5 },
{ id: "Child1", group: 10 },
{ id: "Child2", group: 10 },
{ id: "Brujon", group: 4 },
{ id: "Mme.Hucheloup", group: 8 },
],
links: [
{ source: "Napoleon", target: "Myriel", value: 1 },
{ source: "Mlle.Baptistine", target: "Myriel", value: 8 },
{ source: "Mme.Magloire", target: "Myriel", value: 10 },
{ source: "Mme.Magloire", target: "Mlle.Baptistine", value: 6 },
{ source: "CountessdeLo", target: "Myriel", value: 1 },
{ source: "Geborand", target: "Myriel", value: 1 },
{ source: "Thenardier", target: "Fantine", value: 1 },
{ source: "Thenardier", target: "Valjean", value: 12 },
{ source: "Cosette", target: "Mme.Thenardier", value: 4 },
{ source: "Cosette", target: "Valjean", value: 31 },
{ source: "Cosette", target: "Tholomyes", value: 1 },
{ source: "Cosette", target: "Thenardier", value: 1 },
{ source: "Javert", target: "Valjean", value: 17 },
{ source: "Javert", target: "Fantine", value: 5 },
{ source: "Javert", target: "Thenardier", value: 5 },
{ source: "Javert", target: "Mme.Thenardier", value: 1 },
{ source: "Javert", target: "Cosette", value: 1 },
{ source: "Fauchelevent", target: "Valjean", value: 8 },
{ source: "Fauchelevent", target: "Javert", value: 1 },
{ source: "Bamatabois", target: "Fantine", value: 1 },
{ source: "Bamatabois", target: "Javert", value: 1 },
{ source: "Bamatabois", target: "Valjean", value: 2 },
{ source: "Perpetue", target: "Fantine", value: 1 },
{ source: "Simplice", target: "Perpetue", value: 2 },
{ source: "Simplice", target: "Valjean", value: 3 },
{ source: "Simplice", target: "Fantine", value: 2 },
{ source: "Simplice", target: "Javert", value: 1 },
{ source: "Scaufflaire", target: "Valjean", value: 1 },
{ source: "Woman1", target: "Valjean", value: 2 },
{ source: "Woman1", target: "Javert", value: 1 },
{ source: "Judge", target: "Valjean", value: 3 },
{ source: "Judge", target: "Bamatabois", value: 2 },
{ source: "Champmathieu", target: "Valjean", value: 3 },
{ source: "Champmathieu", target: "Judge", value: 3 },
{ source: "Champmathieu", target: "Bamatabois", value: 2 },
{ source: "Brevet", target: "Judge", value: 2 },
{ source: "Brevet", target: "Champmathieu", value: 2 },
{ source: "Brevet", target: "Valjean", value: 2 },
{ source: "Brevet", target: "Bamatabois", value: 1 },
{ source: "Chenildieu", target: "Judge", value: 2 },
{ source: "Chenildieu", target: "Champmathieu", value: 2 },
{ source: "Chenildieu", target: "Brevet", value: 2 },
{ source: "Chenildieu", target: "Valjean", value: 2 },
{ source: "Chenildieu", target: "Bamatabois", value: 1 },
{ source: "Cochepaille", target: "Judge", value: 2 },
{ source: "Cochepaille", target: "Champmathieu", value: 2 },
{ source: "Cochepaille", target: "Brevet", value: 2 },
{ source: "Cochepaille", target: "Chenildieu", value: 2 },
{ source: "Cochepaille", target: "Valjean", value: 2 },
{ source: "Cochepaille", target: "Bamatabois", value: 1 },
{ source: "Pontmercy", target: "Thenardier", value: 1 },
{ source: "Boulatruelle", target: "Thenardier", value: 1 },
{ source: "Eponine", target: "Mme.Thenardier", value: 2 },
{ source: "Eponine", target: "Thenardier", value: 3 },
{ source: "Anzelma", target: "Eponine", value: 2 },
{ source: "Anzelma", target: "Thenardier", value: 2 },
{ source: "Anzelma", target: "Mme.Thenardier", value: 1 },
{ source: "Woman2", target: "Valjean", value: 3 },
{ source: "Woman2", target: "Cosette", value: 1 },
{ source: "Woman2", target: "Javert", value: 1 },
{ source: "MotherInnocent", target: "Fauchelevent", value: 3 },
{ source: "MotherInnocent", target: "Valjean", value: 1 },
{ source: "Gribier", target: "Fauchelevent", value: 2 },
{ source: "Mme.Burgon", target: "Jondrette", value: 1 },
{ source: "Gavroche", target: "Mme.Burgon", value: 2 },
{ source: "Gavroche", target: "Thenardier", value: 1 },
{ source: "Gavroche", target: "Javert", value: 1 },
{ source: "Gavroche", target: "Valjean", value: 1 },
{ source: "Gillenormand", target: "Cosette", value: 3 },
{ source: "Gillenormand", target: "Valjean", value: 2 },
{ source: "Magnon", target: "Gillenormand", value: 1 },
{ source: "Magnon", target: "Mme.Thenardier", value: 1 },
{ source: "Mlle.Gillenormand", target: "Gillenormand", value: 9 },
{ source: "Mlle.Gillenormand", target: "Cosette", value: 2 },
{ source: "Mlle.Gillenormand", target: "Valjean", value: 2 },
{ source: "Mme.Pontmercy", target: "Mlle.Gillenormand", value: 1 },
{ source: "Mme.Pontmercy", target: "Pontmercy", value: 1 },
{ source: "Mlle.Vaubois", target: "Mlle.Gillenormand", value: 1 },
{ source: "Lt.Gillenormand", target: "Mlle.Gillenormand", value: 2 },
{ source: "Lt.Gillenormand", target: "Gillenormand", value: 1 },
{ source: "Lt.Gillenormand", target: "Cosette", value: 1 },
{ source: "Marius", target: "Mlle.Gillenormand", value: 6 },
{ source: "Marius", target: "Gillenormand", value: 12 },
{ source: "Marius", target: "Pontmercy", value: 1 },
{ source: "Marius", target: "Lt.Gillenormand", value: 1 },
{ source: "Marius", target: "Cosette", value: 21 },
{ source: "Marius", target: "Valjean", value: 19 },
{ source: "Marius", target: "Tholomyes", value: 1 },
{ source: "Marius", target: "Thenardier", value: 2 },
{ source: "Marius", target: "Eponine", value: 5 },
{ source: "Marius", target: "Gavroche", value: 4 },
{ source: "BaronessT", target: "Gillenormand", value: 1 },
{ source: "BaronessT", target: "Marius", value: 1 },
{ source: "Mabeuf", target: "Marius", value: 1 },
{ source: "Mabeuf", target: "Eponine", value: 1 },
{ source: "Mabeuf", target: "Gavroche", value: 1 },
{ source: "Enjolras", target: "Marius", value: 7 },
{ source: "Enjolras", target: "Gavroche", value: 7 },
{ source: "Enjolras", target: "Javert", value: 6 },
{ source: "Enjolras", target: "Mabeuf", value: 1 },
{ source: "Enjolras", target: "Valjean", value: 4 },
{ source: "Combeferre", target: "Enjolras", value: 15 },
{ source: "Combeferre", target: "Marius", value: 5 },
{ source: "Combeferre", target: "Gavroche", value: 6 },
{ source: "Combeferre", target: "Mabeuf", value: 2 },
{ source: "Prouvaire", target: "Gavroche", value: 1 },
{ source: "Prouvaire", target: "Enjolras", value: 4 },
{ source: "Prouvaire", target: "Combeferre", value: 2 },
{ source: "Feuilly", target: "Gavroche", value: 2 },
{ source: "Feuilly", target: "Enjolras", value: 6 },
{ source: "Feuilly", target: "Prouvaire", value: 2 },
{ source: "Feuilly", target: "Combeferre", value: 5 },
{ source: "Feuilly", target: "Mabeuf", value: 1 },
{ source: "Feuilly", target: "Marius", value: 1 },
{ source: "Courfeyrac", target: "Marius", value: 9 },
{ source: "Courfeyrac", target: "Enjolras", value: 17 },
{ source: "Courfeyrac", target: "Combeferre", value: 13 },
{ source: "Courfeyrac", target: "Gavroche", value: 7 },
{ source: "Courfeyrac", target: "Mabeuf", value: 2 },
{ source: "Courfeyrac", target: "Eponine", value: 1 },
{ source: "Courfeyrac", target: "Feuilly", value: 6 },
{ source: "Courfeyrac", target: "Prouvaire", value: 3 },
{ source: "Brujon", target: "Eponine", value: 1 },
{ source: "Brujon", target: "Claquesous", value: 1 },
{ source: "Brujon", target: "Montparnasse", value: 1 },
{ source: "Mme.Hucheloup", target: "Bossuet", value: 1 },
{ source: "Mme.Hucheloup", target: "Joly", value: 1 },
{ source: "Mme.Hucheloup", target: "Grantaire", value: 1 },
{ source: "Mme.Hucheloup", target: "Bahorel", value: 1 },
{ source: "Mme.Hucheloup", target: "Courfeyrac", value: 1 },
{ source: "Mme.Hucheloup", target: "Gavroche", value: 1 },
{ source: "Mme.Hucheloup", target: "Enjolras", value: 1 },
],
};
// const { nodes, links } = await (await fetch('socfb-Caltech36.json')).json();
nodes.forEach((node) => {
graph.addNode(node.id, node);
});
links.forEach((link) => {
graph.addEdge(link.source, link.target, link);
});
// layout
graph.forEachNode((node) => {
graph.setNodeAttribute(node, "x", Math.random());
graph.setNodeAttribute(node, "y", Math.random());
});
// forceAtlas2.assign(graph, { iterations: 300, settings: { ...forceAtlas2.inferSettings(graph), scalingRatio: 80 }});
const positions = {
Myriel: { x: -319.5938720703125, y: -554.8636474609375 },
Napoleon: { x: -371.102294921875, y: -597.3857421875 },
"Mlle.Baptistine": { x: -243.19654846191406, y: -412.5160217285156 },
"Mme.Magloire": { x: -261.1895446777344, y: -407.1710205078125 },
CountessdeLo: { x: -351.65069580078125, y: -608.175048828125 },
Geborand: { x: -357.7313537597656, y: -632.88134765625 },
Champtercier: { x: -331.6962585449219, y: -613.2356567382812 },
Cravatte: { x: -374.6083068847656, y: -618.6746826171875 },
Count: { x: -316.7993469238281, y: -627.67431640625 },
OldMan: { x: -337.1902770996094, y: -638.0137329101562 },
Labarre: { x: -196.04751586914062, y: -206.07435607910156 },
Valjean: { x: -139.4636688232422, y: -131.9685516357422 },
Marguerite: { x: -296.9861145019531, y: -11.065747261047363 },
"Mme.deR": { x: -175.80589294433594, y: -204.32505798339844 },
Isabeau: { x: -202.56765747070312, y: -184.3802490234375 },
Gervais: { x: -175.2349395751953, y: -225.46409606933594 },
Tholomyes: { x: -364.1100158691406, y: 229.74696350097656 },
Listolier: { x: -497.5599670410156, y: 223.6985626220703 },
Fameuil: { x: -483.51434326171875, y: 274.7868347167969 },
Blacheville: { x: -454.1170349121094, y: 272.83612060546875 },
Favourite: { x: -468.734375, y: 219.8541259765625 },
Dahlia: { x: -500.7531433105469, y: 252.30413818359375 },
Zephine: { x: -454.21685791015625, y: 244.15045166015625 },
Fantine: { x: -342.15960693359375, y: 110.13361358642578 },
"Mme.Thenardier": { x: -55.454769134521484, y: 20.180898666381836 },
Thenardier: { x: 16.608823776245117, y: 19.00442886352539 },
Cosette: { x: -105.6224594116211, y: 95.86400604248047 },
Javert: { x: -71.88691711425781, y: -48.92572021484375 },
Fauchelevent: { x: -108.65303802490234, y: -249.78720092773438 },
Bamatabois: { x: -320.6305236816406, y: -151.48208618164062 },
Perpetue: { x: -356.4841003417969, y: 52.70114517211914 },
Simplice: { x: -264.0255126953125, y: 3.9145567417144775 },
Scaufflaire: { x: -153.30738830566406, y: -216.76480102539062 },
Woman1: { x: -158.19863891601562, y: -80.40625 },
Judge: { x: -366.9010925292969, y: -232.15151977539062 },
Champmathieu: { x: -336.9045104980469, y: -209.40663146972656 },
Brevet: { x: -321.26422119140625, y: -233.02935791015625 },
Chenildieu: { x: -365.0048828125, y: -203.91456604003906 },
Cochepaille: { x: -343.866943359375, y: -249.0477294921875 },
Pontmercy: { x: 59.57659149169922, y: 191.4292449951172 },
Boulatruelle: { x: 9.156700134277344, y: 82.76083374023438 },
Eponine: { x: 124.48265838623047, y: 10.975862503051758 },
Anzelma: { x: 40.5140380859375, y: 56.05881118774414 },
Woman2: { x: -149.51480102539062, y: -24.99604606628418 },
MotherInnocent: { x: -137.12112426757812, y: -262.8317565917969 },
Gribier: { x: -107.63961791992188, y: -336.37353515625 },
Jondrette: { x: 512.7171020507812, y: -210.77003479003906 },
"Mme.Burgon": { x: 445.8450927734375, y: -160.9846649169922 },
Gavroche: { x: 271.94744873046875, y: -22.884611129760742 },
Gillenormand: { x: -29.188657760620117, y: 156.00843811035156 },
Magnon: { x: -71.35029602050781, y: 135.9672088623047 },
"Mlle.Gillenormand": { x: -50.69566345214844, y: 195.80865478515625 },
"Mme.Pontmercy": { x: 0.7528436183929443, y: 268.0276794433594 },
"Mlle.Vaubois": { x: -75.28184509277344, y: 285.63482666015625 },
"Lt.Gillenormand": { x: -8.336037635803223, y: 202.83279418945312 },
Marius: { x: 149.59442138671875, y: 135.3687286376953 },
BaronessT: { x: 70.03011322021484, y: 219.35992431640625 },
Mabeuf: { x: 315.9121398925781, y: 98.8280258178711 },
Enjolras: { x: 275.9970703125, y: 58.15005874633789 },
Combeferre: { x: 385.9283752441406, y: 64.12553405761719 },
Prouvaire: { x: 434.0696105957031, y: 46.24740219116211 },
Feuilly: { x: 377.1950378417969, y: 102.29449462890625 },
Courfeyrac: { x: 344.7767333984375, y: 129.05642700195312 },
Bahorel: { x: 390.31787109375, y: 148.2519989013672 },
Bossuet: { x: 339.99859619140625, y: 45.74384307861328 },
Joly: { x: 417.08526611328125, y: 121.08226013183594 },
Grantaire: { x: 457.9179382324219, y: 87.14999389648438 },
MotherPlutarch: { x: 412.1767578125, y: 12.456450462341309 },
Gueulemer: { x: 45.698734283447266, y: -97.7848129272461 },
Babet: { x: 36.17210388183594, y: -66.52565002441406 },
Claquesous: { x: 62.680694580078125, y: -43.426212310791016 },
Montparnasse: { x: 82.17730712890625, y: -100.35445404052734 },
Toussaint: { x: -147.5833740234375, y: -3.969088315963745 },
Child1: { x: 373.2082214355469, y: -125.63217163085938 },
Child2: { x: 359.4578857421875, y: -134.36244201660156 },
Brujon: { x: 126.8355484008789, y: -74.54096221923828 },
"Mme.Hucheloup": { x: 425.4888000488281, y: 80.81478118896484 },
};
graph.forEachNode((node) => {
const position = positions[node];
graph.setNodeAttribute(node, "x", position.x);
graph.setNodeAttribute(node, "y", position.y);
});
const style = {
node: {
size: 15,
color: (node) => colors[(node.group || 0) % colors.length],
border: {
width: 2,
color: "#ffffff",
},
icon: {
content: "person",
fontFamily: "Material Icons",
fontSize: 20,
color: "#ffffff",
},
label: {
content: (node) => node.id,
type: PixiGraph.TextType.BITMAP_TEXT,
fontFamily: "HelveticaRegular",
fontSize: 12,
color: "#333333",
backgroundColor: "rgba(255, 255, 255, 0.5)",
padding: 4,
},
},
edge: {
width: (link) => Math.log((link.value || 0) + 1) + 1,
color: "#cccccc",
},
};
const hoverStyle = {
node: {
border: {
color: "#000000",
},
label: {
backgroundColor: "rgba(238, 238, 238, 1)",
},
},
edge: {
color: "#999999",
},
};
const resources = [
{
name: "HelveticaRegular",
url: "https://gist.githubusercontent.com/zakjan/b61c0a26d297edf0c09a066712680f37/raw/8cdda3c21ba3668c3dd022efac6d7f740c9f1e18/HelveticaRegular.fnt",
},
];
var elements = document.getElementsByClassName("graphClass")
var containerValue = component.find('graph').get("v.value");
const pixiGraph = new PixiGraph.PixiGraph({
container: elements[0],
graph,
style,
hoverStyle,
resources,
});
}
})