g6/demos/layout-force-web-worker.html
2019-11-18 23:14:17 +08:00

1588 lines
32 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Force Layout using web worker</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
const data = {
"nodes": [{
"id": "Myriel"
},
{
"id": "Napoleon"
},
{
"id": "Mlle.Baptistine"
},
{
"id": "Mme.Magloire"
},
{
"id": "CountessdeLo"
},
{
"id": "Geborand"
},
{
"id": "Champtercier"
},
{
"id": "Cravatte"
},
{
"id": "Count"
},
{
"id": "OldMan"
},
{
"id": "Labarre"
},
{
"id": "Valjean"
},
{
"id": "Marguerite"
},
{
"id": "Mme.deR"
},
{
"id": "Isabeau"
},
{
"id": "Gervais"
},
{
"id": "Tholomyes"
},
{
"id": "Listolier"
},
{
"id": "Fameuil"
},
{
"id": "Blacheville"
},
{
"id": "Favourite"
},
{
"id": "Dahlia"
},
{
"id": "Zephine"
},
{
"id": "Fantine"
},
{
"id": "Mme.Thenardier"
},
{
"id": "Thenardier"
},
{
"id": "Cosette"
},
{
"id": "Javert"
},
{
"id": "Fauchelevent"
},
{
"id": "Bamatabois"
},
{
"id": "Perpetue"
},
{
"id": "Simplice"
},
{
"id": "Scaufflaire"
},
{
"id": "Woman1"
},
{
"id": "Judge"
},
{
"id": "Champmathieu"
},
{
"id": "Brevet"
},
{
"id": "Chenildieu"
},
{
"id": "Cochepaille"
},
{
"id": "Pontmercy"
},
{
"id": "Boulatruelle"
},
{
"id": "Eponine"
},
{
"id": "Anzelma"
},
{
"id": "Woman2"
},
{
"id": "MotherInnocent"
},
{
"id": "Gribier"
},
{
"id": "Jondrette"
},
{
"id": "Mme.Burgon"
},
{
"id": "Gavroche"
},
{
"id": "Gillenormand"
},
{
"id": "Magnon"
},
{
"id": "Mlle.Gillenormand"
},
{
"id": "Mme.Pontmercy"
},
{
"id": "Mlle.Vaubois"
},
{
"id": "Lt.Gillenormand"
},
{
"id": "Marius"
},
{
"id": "BaronessT"
},
{
"id": "Mabeuf"
},
{
"id": "Enjolras"
},
{
"id": "Combeferre"
},
{
"id": "Prouvaire"
},
{
"id": "Feuilly"
},
{
"id": "Courfeyrac"
},
{
"id": "Bahorel"
},
{
"id": "Bossuet"
},
{
"id": "Joly"
},
{
"id": "Grantaire"
},
{
"id": "MotherPlutarch"
},
{
"id": "Gueulemer"
},
{
"id": "Babet"
},
{
"id": "Claquesous"
},
{
"id": "Montparnasse"
},
{
"id": "Toussaint"
},
{
"id": "Child1"
},
{
"id": "Child2"
},
{
"id": "Brujon"
},
{
"id": "Mme.Hucheloup"
}],
"edges": [{
"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": "Champtercier",
"target": "Myriel",
"value": 1
},
{
"source": "Cravatte",
"target": "Myriel",
"value": 1
},
{
"source": "Count",
"target": "Myriel",
"value": 2
},
{
"source": "OldMan",
"target": "Myriel",
"value": 1
},
{
"source": "Valjean",
"target": "Labarre",
"value": 1
},
{
"source": "Valjean",
"target": "Mme.Magloire",
"value": 3
},
{
"source": "Valjean",
"target": "Mlle.Baptistine",
"value": 3
},
{
"source": "Valjean",
"target": "Myriel",
"value": 5
},
{
"source": "Marguerite",
"target": "Valjean",
"value": 1
},
{
"source": "Mme.deR",
"target": "Valjean",
"value": 1
},
{
"source": "Isabeau",
"target": "Valjean",
"value": 1
},
{
"source": "Gervais",
"target": "Valjean",
"value": 1
},
{
"source": "Listolier",
"target": "Tholomyes",
"value": 4
},
{
"source": "Fameuil",
"target": "Tholomyes",
"value": 4
},
{
"source": "Fameuil",
"target": "Listolier",
"value": 4
},
{
"source": "Blacheville",
"target": "Tholomyes",
"value": 4
},
{
"source": "Blacheville",
"target": "Listolier",
"value": 4
},
{
"source": "Blacheville",
"target": "Fameuil",
"value": 4
},
{
"source": "Favourite",
"target": "Tholomyes",
"value": 3
},
{
"source": "Favourite",
"target": "Listolier",
"value": 3
},
{
"source": "Favourite",
"target": "Fameuil",
"value": 3
},
{
"source": "Favourite",
"target": "Blacheville",
"value": 4
},
{
"source": "Dahlia",
"target": "Tholomyes",
"value": 3
},
{
"source": "Dahlia",
"target": "Listolier",
"value": 3
},
{
"source": "Dahlia",
"target": "Fameuil",
"value": 3
},
{
"source": "Dahlia",
"target": "Blacheville",
"value": 3
},
{
"source": "Dahlia",
"target": "Favourite",
"value": 5
},
{
"source": "Zephine",
"target": "Tholomyes",
"value": 3
},
{
"source": "Zephine",
"target": "Listolier",
"value": 3
},
{
"source": "Zephine",
"target": "Fameuil",
"value": 3
},
{
"source": "Zephine",
"target": "Blacheville",
"value": 3
},
{
"source": "Zephine",
"target": "Favourite",
"value": 4
},
{
"source": "Zephine",
"target": "Dahlia",
"value": 4
},
{
"source": "Fantine",
"target": "Tholomyes",
"value": 3
},
{
"source": "Fantine",
"target": "Listolier",
"value": 3
},
{
"source": "Fantine",
"target": "Fameuil",
"value": 3
},
{
"source": "Fantine",
"target": "Blacheville",
"value": 3
},
{
"source": "Fantine",
"target": "Favourite",
"value": 4
},
{
"source": "Fantine",
"target": "Dahlia",
"value": 4
},
{
"source": "Fantine",
"target": "Zephine",
"value": 4
},
{
"source": "Fantine",
"target": "Marguerite",
"value": 2
},
{
"source": "Fantine",
"target": "Valjean",
"value": 9
},
{
"source": "Mme.Thenardier",
"target": "Fantine",
"value": 2
},
{
"source": "Mme.Thenardier",
"target": "Valjean",
"value": 7
},
{
"source": "Thenardier",
"target": "Mme.Thenardier",
"value": 13
},
{
"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": "Bahorel",
"target": "Combeferre",
"value": 5
},
{
"source": "Bahorel",
"target": "Gavroche",
"value": 5
},
{
"source": "Bahorel",
"target": "Courfeyrac",
"value": 6
},
{
"source": "Bahorel",
"target": "Mabeuf",
"value": 2
},
{
"source": "Bahorel",
"target": "Enjolras",
"value": 4
},
{
"source": "Bahorel",
"target": "Feuilly",
"value": 3
},
{
"source": "Bahorel",
"target": "Prouvaire",
"value": 2
},
{
"source": "Bahorel",
"target": "Marius",
"value": 1
},
{
"source": "Bossuet",
"target": "Marius",
"value": 5
},
{
"source": "Bossuet",
"target": "Courfeyrac",
"value": 12
},
{
"source": "Bossuet",
"target": "Gavroche",
"value": 5
},
{
"source": "Bossuet",
"target": "Bahorel",
"value": 4
},
{
"source": "Bossuet",
"target": "Enjolras",
"value": 10
},
{
"source": "Bossuet",
"target": "Feuilly",
"value": 6
},
{
"source": "Bossuet",
"target": "Prouvaire",
"value": 2
},
{
"source": "Bossuet",
"target": "Combeferre",
"value": 9
},
{
"source": "Bossuet",
"target": "Mabeuf",
"value": 1
},
{
"source": "Bossuet",
"target": "Valjean",
"value": 1
},
{
"source": "Joly",
"target": "Bahorel",
"value": 5
},
{
"source": "Joly",
"target": "Bossuet",
"value": 7
},
{
"source": "Joly",
"target": "Gavroche",
"value": 3
},
{
"source": "Joly",
"target": "Courfeyrac",
"value": 5
},
{
"source": "Joly",
"target": "Enjolras",
"value": 5
},
{
"source": "Joly",
"target": "Feuilly",
"value": 5
},
{
"source": "Joly",
"target": "Prouvaire",
"value": 2
},
{
"source": "Joly",
"target": "Combeferre",
"value": 5
},
{
"source": "Joly",
"target": "Mabeuf",
"value": 1
},
{
"source": "Joly",
"target": "Marius",
"value": 2
},
{
"source": "Grantaire",
"target": "Bossuet",
"value": 3
},
{
"source": "Grantaire",
"target": "Enjolras",
"value": 3
},
{
"source": "Grantaire",
"target": "Combeferre",
"value": 1
},
{
"source": "Grantaire",
"target": "Courfeyrac",
"value": 2
},
{
"source": "Grantaire",
"target": "Joly",
"value": 2
},
{
"source": "Grantaire",
"target": "Gavroche",
"value": 1
},
{
"source": "Grantaire",
"target": "Bahorel",
"value": 1
},
{
"source": "Grantaire",
"target": "Feuilly",
"value": 1
},
{
"source": "Grantaire",
"target": "Prouvaire",
"value": 1
},
{
"source": "MotherPlutarch",
"target": "Mabeuf",
"value": 3
},
{
"source": "Gueulemer",
"target": "Thenardier",
"value": 5
},
{
"source": "Gueulemer",
"target": "Valjean",
"value": 1
},
{
"source": "Gueulemer",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Gueulemer",
"target": "Javert",
"value": 1
},
{
"source": "Gueulemer",
"target": "Gavroche",
"value": 1
},
{
"source": "Gueulemer",
"target": "Eponine",
"value": 1
},
{
"source": "Babet",
"target": "Thenardier",
"value": 6
},
{
"source": "Babet",
"target": "Gueulemer",
"value": 6
},
{
"source": "Babet",
"target": "Valjean",
"value": 1
},
{
"source": "Babet",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Babet",
"target": "Javert",
"value": 2
},
{
"source": "Babet",
"target": "Gavroche",
"value": 1
},
{
"source": "Babet",
"target": "Eponine",
"value": 1
},
{
"source": "Claquesous",
"target": "Thenardier",
"value": 4
},
{
"source": "Claquesous",
"target": "Babet",
"value": 4
},
{
"source": "Claquesous",
"target": "Gueulemer",
"value": 4
},
{
"source": "Claquesous",
"target": "Valjean",
"value": 1
},
{
"source": "Claquesous",
"target": "Mme.Thenardier",
"value": 1
},
{
"source": "Claquesous",
"target": "Javert",
"value": 1
},
{
"source": "Claquesous",
"target": "Eponine",
"value": 1
},
{
"source": "Claquesous",
"target": "Enjolras",
"value": 1
},
{
"source": "Montparnasse",
"target": "Javert",
"value": 1
},
{
"source": "Montparnasse",
"target": "Babet",
"value": 2
},
{
"source": "Montparnasse",
"target": "Gueulemer",
"value": 2
},
{
"source": "Montparnasse",
"target": "Claquesous",
"value": 2
},
{
"source": "Montparnasse",
"target": "Valjean",
"value": 1
},
{
"source": "Montparnasse",
"target": "Gavroche",
"value": 1
},
{
"source": "Montparnasse",
"target": "Eponine",
"value": 1
},
{
"source": "Montparnasse",
"target": "Thenardier",
"value": 1
},
{
"source": "Toussaint",
"target": "Cosette",
"value": 2
},
{
"source": "Toussaint",
"target": "Javert",
"value": 1
},
{
"source": "Toussaint",
"target": "Valjean",
"value": 1
},
{
"source": "Child1",
"target": "Gavroche",
"value": 2
},
{
"source": "Child2",
"target": "Gavroche",
"value": 2
},
{
"source": "Child2",
"target": "Child1",
"value": 3
},
{
"source": "Brujon",
"target": "Babet",
"value": 3
},
{
"source": "Brujon",
"target": "Gueulemer",
"value": 3
},
{
"source": "Brujon",
"target": "Thenardier",
"value": 3
},
{
"source": "Brujon",
"target": "Gavroche",
"value": 1
},
{
"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 graph = new G6.Graph({
container: 'mountNode',
width: 1000,
height: 600,
layout: {
type: 'force',
preventOverlap: true,
nodeSpacing: 10,
// use web worker to layout
workerEnabled: true
},
modes: {
default: [
{
type: 'drag-node',
enableDelegate: true
}, {
type: 'brush-select',
trigger: 'Shift'
}, 'click-select', 'activate-relations']
},
defaultNode: {
size: [30, 30],
style: {
fill: 'steelblue'
}
},
defaultEdge: {
size: 1,
color: '#e2e2e2',
style: {
endArrow: {
path: 'M 4,0 L -4,-4 L -4,4 Z',
d: 4
}
}
},
nodeStateStyles: {
inactive: {
fillOpacity: 0.1
},
active: {
fillOpacity: 0.8,
fill: 'green'
},
selected: {
fill: 'red'
}
},
edgeStateStyles: {
inactive: {
fillOpacity: 0.1
},
active: {
fillOpacity: 8
}
}
});
graph.data({
nodes: data.nodes,
edges: data.edges.map((edge, i) => {
edge.id = 'edge' + i;
return Object.assign({},
edge);
})
});
graph.render();
</script>
</body>
</html>