What is the best way with many data? #158
Comments
|
I'm also having problems to load many data. I'm getting this error: When using the 3D forces, this error appeared sooner with less data. I removed the 3D forces and worked, now I when I scaled up the number of nodes and edges it reapeared. |
|
Hi @Suniron, Hi @johnfercher, |
|
Version: @vue/cli 5.0.8 {
"nodes": {
"aracaju": {
"id": "aracaju",
"name": "Aracaju",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 55,
"height": 40,
"x": 960.8859999999997,
"y": -149.97750000000008
},
"aruana": {
"id": "aruana",
"name": "Aruanã",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 55,
"height": 40,
"x": 190.75950000000012,
"y": 70.8365
},
"belem": {
"id": "belem",
"name": "Belém",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 50,
"height": 40,
"x": 332.36799999999994,
"y": -669.9739
},
"belo_horizonte": {
"id": "belo_horizonte",
"name": "Belo Horizonte",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 90,
"height": 40,
"x": 583.248685,
"y": 345.2148900000002
},
"boa_vista": {
"id": "boa_vista",
"name": "Boa Vista",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": -336.92700000000013,
"y": -905.0747
},
"brasilia": {
"id": "brasilia",
"name": "Brasília",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": 363.8939999999998,
"y": 117.90549999999996
},
"caico": {
"id": "caico",
"name": "Caicó",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 50,
"height": 40,
"x": 959.5550000000003,
"y": -394.71045
},
"campo_grande": {
"id": "campo_grande",
"name": "Campo Grande",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 80,
"height": 40,
"x": -5.628999999999905,
"y": 374.3924999999999
},
"campos_dos_goytacazes": {
"id": "campos_dos_goytacazes",
"name": "Campos dos Goytacazes",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 125,
"height": 40,
"x": 727.1580000000004,
"y": 446.49749999999995
},
"cascavel": {
"id": "cascavel",
"name": "Cascavel",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 59.96399999999994,
"y": 622.5525
},
"chapeco": {
"id": "chapeco",
"name": "Chapecó",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 105.97699999999986,
"y": 740.3240000000001
},
"coari": {
"id": "coari",
"name": "Coari",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 45,
"height": 40,
"x": -472.7935000000002,
"y": -525.3316
},
"confresa": {
"id": "confresa",
"name": "Confresa",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 163.76549999999997,
"y": -164.5525
},
"cruzeiro_do_sul": {
"id": "cruzeiro_do_sul",
"name": "Cruzeiro do Sul",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 95,
"height": 40,
"x": -995.7720000000004,
"y": -328.4305
},
"cuiaba": {
"id": "cuiaba",
"name": "Cuiabá",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 55,
"height": 40,
"x": -85.21950000000015,
"y": 107.93950000000007
},
"curitiba": {
"id": "curitiba",
"name": "Curitiba",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 289.96849999999995,
"y": 648.5619999999999
},
"dourados": {
"id": "dourados",
"name": "Dourados",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": -14.690172999999959,
"y": 472.2958550000001
},
"florianopolis": {
"id": "florianopolis",
"name": "Florianópolis",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 90,
"height": 40,
"x": 329.2802999999999,
"y": 767.6424999999999
},
"fortaleza": {
"id": "fortaleza",
"name": "Fortaleza",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": 880.1130000000003,
"y": -545.48855
},
"goiania": {
"id": "goiania",
"name": "Goiânia",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 290.9749999999999,
"y": 167.3945
},
"guiana": {
"id": "guiana",
"name": "Guiana",
"color": "#D8002F",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 50,
"height": 40,
"x": -198.558,
"y": -1124.2607
},
"guiana_francesa": {
"id": "guiana_francesa",
"name": "Guiana Francesa",
"color": "#D8002F",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 95,
"height": 40,
"x": 121.66849999999977,
"y": -1021.3331499999999
},
"ibotirama": {
"id": "ibotirama",
"name": "Ibotirama",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": 623.2739999999999,
"y": -80.00099999999998
},
"imperatriz": {
"id": "imperatriz",
"name": "Imperatriz",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 70,
"height": 40,
"x": 388.7650000000003,
"y": -446.09749999999997
},
"itaituba": {
"id": "itaituba",
"name": "Itaituba",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": -79.4335000000001,
"y": -515.19785
},
"itamaraju": {
"id": "itamaraju",
"name": "Itamaraju",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": 824.904,
"y": 188.08550000000002
},
"ji_parana": {
"id": "ji_parana",
"name": "Ji-Paraná",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 70,
"height": 40,
"x": -407.3418499999998,
"y": -151.30960000000005
},
"joao_pessoa": {
"id": "joao_pessoa",
"name": "João Pessoa",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 80,
"height": 40,
"x": 1082.6450000000002,
"y": -358.6574
},
"juazeiro_do_norte": {
"id": "juazeiro_do_norte",
"name": "Juazeiro do Norte",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 105,
"height": 40,
"x": 837.279,
"y": -351.95509999999996
},
"londrina": {
"id": "londrina",
"name": "Londrina",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 185.4739999999997,
"y": 531.0985000000001
},
"macapa": {
"id": "macapa",
"name": "Macapá",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 55,
"height": 40,
"x": 191.337,
"y": -751.895113
},
"maceio": {
"id": "maceio",
"name": "Maceió",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 55,
"height": 40,
"x": 1034.5694999999998,
"y": -218.35625000000005
},
"manaus": {
"id": "manaus",
"name": "Manaus",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 50,
"height": 40,
"x": -301.43550000000005,
"y": -579.10455
},
"montes_claros": {
"id": "montes_claros",
"name": "Montes Claros",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 85,
"height": 40,
"x": 587.4414999999999,
"y": 170.53499999999985
},
"mossoro": {
"id": "mossoro",
"name": "Mossoró",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 946.0745000000002,
"y": -464.6578
},
"natal": {
"id": "natal",
"name": "Natal",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 45,
"height": 40,
"x": 1063.395,
"y": -431.3036
},
"oiapoque": {
"id": "oiapoque",
"name": "Oiapoque",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 149.05299999999988,
"y": -960.73195
},
"pacaraima": {
"id": "pacaraima",
"name": "Pacaraima",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": -362.74400000000014,
"y": -992.93555
},
"palmas": {
"id": "palmas",
"name": "Palmas",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 50,
"height": 40,
"x": 341.75649999999996,
"y": -190.7104999999999
},
"parauapebas": {
"id": "parauapebas",
"name": "Parauapebas",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 75,
"height": 40,
"x": 255.26350000000002,
"y": -416.1093
},
"parnaiba": {
"id": "parnaiba",
"name": "Parnaíba",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": 702.3035,
"y": -590.28385
},
"petrolina": {
"id": "petrolina",
"name": "Petrolina",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": 771.9720000000002,
"y": -233.3212000000001
},
"porto_velho": {
"id": "porto_velho",
"name": "Porto Velho",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 75,
"height": 40,
"x": -514.6100000000001,
"y": -268.09935
},
"recife": {
"id": "recife",
"name": "Recife",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 50,
"height": 40,
"x": 1081.5285,
"y": -307.0146
},
"rio_branco": {
"id": "rio_branco",
"name": "Rio Branco",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 70,
"height": 40,
"x": -729.4179999999997,
"y": -201.42999999999995
},
"rio_verde": {
"id": "rio_verde",
"name": "Rio Verde",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": 200.5,
"y": 228.846
},
"rorainopolis": {
"id": "rorainopolis",
"name": "Rorainópolis",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 85,
"height": 40,
"x": -323.0119999999997,
"y": -802.00987
},
"salvador": {
"id": "salvador",
"name": "Salvador",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 881.8180000000002,
"y": -36.62800000000004
},
"santarem": {
"id": "santarem",
"name": "Santarém",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": -8.428499999999985,
"y": -615.8308
},
"sao_luis": {
"id": "sao_luis",
"name": "São Luís",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 70,
"height": 40,
"x": 563.1259999999997,
"y": -610.80985
},
"sao_paulo": {
"id": "sao_paulo",
"name": "São Paulo",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 70,
"height": 40,
"x": 434.866,
"y": 545.1895
},
"sinop": {
"id": "sinop",
"name": "Sinop",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 45,
"height": 40,
"x": -52.40099999999984,
"y": -96.98500000000001
},
"sobral": {
"id": "sobral",
"name": "Sobral",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 50,
"height": 40,
"x": 780.6840000000002,
"y": -547.4493
},
"tabatinga": {
"id": "tabatinga",
"name": "Tabatinga",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": -846.6175000000003,
"y": -516.06575
},
"tarauaca": {
"id": "tarauaca",
"name": "Tarauacá",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 65,
"height": 40,
"x": -892.0749999999998,
"y": -302.5409
},
"tefe": {
"id": "tefe",
"name": "Tefé",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 45,
"height": 40,
"x": -559.7980000000002,
"y": -567.35985
},
"teresina": {
"id": "teresina",
"name": "Teresina",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 645.9119999999998,
"y": -470.09345
},
"uberlandia": {
"id": "uberlandia",
"name": "Uberlândia",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 75,
"height": 40,
"x": 345.3391999999999,
"y": 290.25152
},
"vilhena": {
"id": "vilhena",
"name": "Vilhena",
"color": "#008E30",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 55,
"height": 40,
"x": -307.953,
"y": -49.62450000000001
},
"vitoria": {
"id": "vitoria",
"name": "Vitória",
"color": "#2345AB",
"radius": 0,
"border_radius": 10,
"type": "rect",
"width": 60,
"height": 40,
"x": 781.4045000000001,
"y": 367.721
}
},
"edges": {
"edge0": {
"source": "rio_verde",
"target": "uberlandia",
"label": "336 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge1": {
"source": "curitiba",
"target": "florianopolis",
"label": "307 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge10": {
"source": "macapa",
"target": "belem",
"label": "537 Km",
"color": "#3355BB",
"type": "curve",
"dashed": false,
"width": 4
},
"edge100": {
"source": "ji_parana",
"target": "vilhena",
"label": "334 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge101": {
"source": "maceio",
"target": "aracaju",
"label": "500 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge102": {
"source": "ibotirama",
"target": "palmas",
"label": "820 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge103": {
"source": "brasilia",
"target": "goiania",
"label": "208 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge104": {
"source": "imperatriz",
"target": "belem",
"label": "580 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge105": {
"source": "campo_grande",
"target": "sao_paulo",
"label": "891 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge106": {
"source": "curitiba",
"target": "londrina",
"label": "388 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge11": {
"source": "goiania",
"target": "rio_verde",
"label": "232 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge12": {
"source": "rio_verde",
"target": "campo_grande",
"label": "611 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge13": {
"source": "campo_grande",
"target": "dourados",
"label": "225 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge14": {
"source": "belem",
"target": "santarem",
"label": "1167 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge15": {
"source": "natal",
"target": "caico",
"label": "272 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge16": {
"source": "macapa",
"target": "belem",
"label": "207 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge17": {
"source": "brasilia",
"target": "palmas",
"label": "845 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge18": {
"source": "sao_luis",
"target": "parnaiba",
"label": "658 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge19": {
"source": "sinop",
"target": "itaituba",
"label": "998 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge2": {
"source": "londrina",
"target": "sao_paulo",
"label": "537 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge20": {
"source": "santarem",
"target": "parauapebas",
"label": "1073 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge21": {
"source": "joao_pessoa",
"target": "recife",
"label": "116 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge22": {
"source": "ibotirama",
"target": "brasilia",
"label": "803 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge23": {
"source": "goiania",
"target": "uberlandia",
"label": "340 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge24": {
"source": "londrina",
"target": "cascavel",
"label": "380 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge25": {
"source": "natal",
"target": "mossoro",
"label": "279 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge26": {
"source": "porto_velho",
"target": "ji_parana",
"label": "372 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge27": {
"source": "vitoria",
"target": "campos_dos_goytacazes",
"label": "241 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge28": {
"source": "cuiaba",
"target": "sinop",
"label": "480 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge29": {
"source": "campo_grande",
"target": "uberlandia",
"label": "760 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge3": {
"source": "rio_branco",
"target": "tarauaca",
"label": "409 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge30": {
"source": "brasilia",
"target": "cuiaba",
"label": "877 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge31": {
"source": "aruana",
"target": "cuiaba",
"label": "780 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge32": {
"source": "aruana",
"target": "palmas",
"label": "764 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge33": {
"source": "boa_vista",
"target": "rorainopolis",
"label": "260 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge34": {
"source": "itamaraju",
"target": "vitoria",
"label": "436 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge35": {
"source": "itaituba",
"target": "porto_velho",
"label": "1252 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge36": {
"source": "joao_pessoa",
"target": "natal",
"label": "181 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge37": {
"source": "curitiba",
"target": "cascavel",
"label": "504 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge38": {
"source": "boa_vista",
"target": "guiana",
"label": "679 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge39": {
"source": "macapa",
"target": "oiapoque",
"label": "578 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge4": {
"source": "confresa",
"target": "parauapebas",
"label": "731 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge40": {
"source": "goiania",
"target": "aruana",
"label": "314 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge41": {
"source": "teresina",
"target": "caico",
"label": "827 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge42": {
"source": "salvador",
"target": "aracaju",
"label": "325 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge43": {
"source": "sinop",
"target": "confresa",
"label": "636 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge44": {
"source": "fortaleza",
"target": "sao_luis",
"label": "652 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge45": {
"source": "fortaleza",
"target": "recife",
"label": "626 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge46": {
"source": "brasilia",
"target": "montes_claros",
"label": "700 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge47": {
"source": "salvador",
"target": "recife",
"label": "670 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge48": {
"source": "juazeiro_do_norte",
"target": "teresina",
"label": "1128 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge49": {
"source": "sobral",
"target": "parnaiba",
"label": "244 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge5": {
"source": "manaus",
"target": "porto_velho",
"label": "768 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge50": {
"source": "uberlandia",
"target": "londrina",
"label": "746 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge51": {
"source": "teresina",
"target": "mossoro",
"label": "826 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge52": {
"source": "manaus",
"target": "coari",
"label": "401 Km",
"color": "#3355BB",
"type": "curve",
"dashed": false,
"width": 4
},
"edge53": {
"source": "tefe",
"target": "coari",
"label": "211 Km",
"color": "#3355BB",
"type": "curve",
"dashed": false,
"width": 4
},
"edge54": {
"source": "fortaleza",
"target": "mossoro",
"label": "241 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge55": {
"source": "juazeiro_do_norte",
"target": "caico",
"label": "323 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge56": {
"source": "ibotirama",
"target": "petrolina",
"label": "709 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge57": {
"source": "brasilia",
"target": "porto_velho",
"label": "1904 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge58": {
"source": "campo_grande",
"target": "londrina",
"label": "589 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge59": {
"source": "teresina",
"target": "parnaiba",
"label": "338 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge6": {
"source": "sao_luis",
"target": "teresina",
"label": "436 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge60": {
"source": "tefe",
"target": "tabatinga",
"label": "901 Km",
"color": "#3355BB",
"type": "curve",
"dashed": false,
"width": 4
},
"edge61": {
"source": "aruana",
"target": "sinop",
"label": "998 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge62": {
"source": "belem",
"target": "parauapebas",
"label": "653 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge63": {
"source": "cascavel",
"target": "chapeco",
"label": "337 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge64": {
"source": "boa_vista",
"target": "pacaraima",
"label": "214 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge65": {
"source": "rio_branco",
"target": "brasilia",
"label": "2249 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge66": {
"source": "manaus",
"target": "brasilia",
"label": "1942 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge67": {
"source": "cuiaba",
"target": "campo_grande",
"label": "707 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge68": {
"source": "rio_branco",
"target": "porto_velho",
"label": "510 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge69": {
"source": "sao_luis",
"target": "imperatriz",
"label": "632 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge7": {
"source": "fortaleza",
"target": "brasilia",
"label": "1686 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge70": {
"source": "sao_luis",
"target": "belem",
"label": "582 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge71": {
"source": "cuiaba",
"target": "vilhena",
"label": "754 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge72": {
"source": "joao_pessoa",
"target": "caico",
"label": "321 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge73": {
"source": "manaus",
"target": "rorainopolis",
"label": "488 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge74": {
"source": "brasilia",
"target": "belo_horizonte",
"label": "733 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge75": {
"source": "sao_luis",
"target": "belem",
"label": "481 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge76": {
"source": "confresa",
"target": "palmas",
"label": "583 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge77": {
"source": "brasilia",
"target": "belem",
"label": "1606 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge78": {
"source": "vitoria",
"target": "belo_horizonte",
"label": "514 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge79": {
"source": "rio_verde",
"target": "cuiaba",
"label": "701 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge8": {
"source": "juazeiro_do_norte",
"target": "petrolina",
"label": "348 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge80": {
"source": "santarem",
"target": "itaituba",
"label": "368 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge81": {
"source": "cruzeiro_do_sul",
"target": "tarauaca",
"label": "228 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge82": {
"source": "imperatriz",
"target": "parauapebas",
"label": "387 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge83": {
"source": "sinop",
"target": "ji_parana",
"label": "996 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge84": {
"source": "petrolina",
"target": "aracaju",
"label": "478 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge85": {
"source": "salvador",
"target": "brasilia",
"label": "1084 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge86": {
"source": "fortaleza",
"target": "teresina",
"label": "604 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge87": {
"source": "brasilia",
"target": "sao_paulo",
"label": "875 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge88": {
"source": "manaus",
"target": "belem",
"label": "1289 Km",
"color": "#F7B900",
"type": "curve",
"dashed": false,
"width": 4
},
"edge89": {
"source": "manaus",
"target": "porto_velho",
"label": "889 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge9": {
"source": "imperatriz",
"target": "palmas",
"label": "628 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge90": {
"source": "parauapebas",
"target": "palmas",
"label": "704 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge91": {
"source": "mossoro",
"target": "caico",
"label": "189 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge92": {
"source": "dourados",
"target": "cascavel",
"label": "411 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge93": {
"source": "petrolina",
"target": "teresina",
"label": "641 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge94": {
"source": "maceio",
"target": "juazeiro_do_norte",
"label": "606 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge95": {
"source": "oiapoque",
"target": "guiana_francesa",
"label": "194 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge96": {
"source": "imperatriz",
"target": "teresina",
"label": "614 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge97": {
"source": "maceio",
"target": "recife",
"label": "257 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge98": {
"source": "parauapebas",
"target": "itaituba",
"label": "1156 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
},
"edge99": {
"source": "curitiba",
"target": "sao_paulo",
"label": "402 Km",
"color": "#666",
"type": "curve",
"dashed": false,
"width": 3
}
},
"paths": null
} |
|
This is my code: <style scoped>
.graph {
border: solid red 1px;
height: 1080px;
}
</style>
<template>
<div v-if="graph !== null">
<v-network-graph
class="graph"
:zoom-level="0.5"
:nodes="graph.nodes"
:layouts="graph.layouts"
:edges="graph.edges"
:configs="configs"
>
<template #edge-label="{ edge, ...slotProps }">
<v-edge-label
:text="edge.label"
align="center"
vertical-align="above"
v-bind="slotProps" />
</template>
</v-network-graph>
</div>
<div v-if="graph === null">
Loading...
</div>
</template>
<script>
import axios from "axios";
import VNetworkGraph from "v-network-graph"
import * as vNG from "v-network-graph"
import {reactive} from "vue";
export default {
name: 'HelloWorld',
props: {
VNetworkGraph,
},
data() {
return {
graph: {
nodes: [],
edges: [],
layouts: {
nodes: [],
}
},
configs: reactive(
vNG.defineConfigs({
node: {
normal: {
radius: n => n.radius,
color: n => n.color,
borderRadius: n => n.border_radius,
type: n => n.type,
width: n => n.width,
height: n => n.height,
x: n => n.x,
y: n => n.y,
},
label: {
visible: true,
color: "#ffffff",
direction: "center",
fontSize: 10,
scale: 100,
},
},
edge: {
selectable: true,
normal: {
width: 3,
color: e => e.color,
dasharray: "0",
linecap: "butt",
animate: false,
animationSpeed: 50,
},
zOrder: {
enabled: true,
zIndex: 1,
bringToFrontOnHover: true,
bringToFrontOnSelected: true,
},
gap: 30,
type: e => e.type,
margin: 10,
marker: {
source: {
type: "none",
width: 4,
height: 4,
margin: -1,
offset: 0,
units: "strokeWidth",
color: null,
},
target: {
type: "none",
width: 4,
height: 4,
margin: -1,
offset: 0,
units: "strokeWidth",
color: null,
},
},
},
})
)
}
},
async mounted() {
await this.getGraph()
},
methods: {
async getGraph() {
var search = {
"source_label": "City",
"target_label": "City",
"source_city_type": "",
"target_city_type": "",
"edge_type": "",
"states": ["ES", "DF", "MS", "PR", "GO", "MT", "AM", "RR", "AC", "RO", "PA", "AP", "TO", "PI", "MA", "SE", "PE", "AL", "PB", "RN"],
//"states": ["AP", "PA", "INTL", "RR", "AM", "RO", "AC", "MS", "SP", "RJ", "MG", "GO", "DF", "CE", "BA", "RS"],
}
const graph = await axios.post("http://localhost:8083/graph/search", search).then(response => {
return response.data
}).catch(err => {
return err
})
this.graph.nodes = graph.nodes
this.graph.edges = graph.edges
this.graph.layouts.nodes = graph.nodes
}
}
}
</script>
|
|
@johnfercher |
|
Which version of Vue are you using? This is my entire project (https://github.com/johnfercher/medium-logistic/tree/ep18-shortest-path/frontend). I'm not a pro frontend developer, maybe I am doing something dumb... I'm running it as |
|
It worksed using |
|
@johnfercher Your project's package.json specifies the following: I checked with the The problem seems to occur with a specific version of Vue; it did not occur with Vue 3.4.x, but with Vue 3.5.0 and 3.5.1. |
|
Thank you! I re-uploaded the video here: https://www.youtube.com/watch?v=XkW-Gh_kHUE |
|
Thank you for sharing the video! |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What is the best way to load many nodes (more than 15 000) and edge (more than 20 000) in the graph? :/
The text was updated successfully, but these errors were encountered: