mirror of
https://gitee.com/antv/g6.git
synced 2024-12-03 04:08:32 +08:00
1620 lines
32 KiB
HTML
1620 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>移动到某一个节点后，高亮所有相邻的节点和边</title></head>
|
|
|
|
<body>
|
|
<div id="mountNode"></div>
|
|
<script src="../build/g6.js"></script>
|
|
<script src="https://d3js.org/d3.v5.min.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: window.innerWidth,
|
|
height: window.innerHeight,
|
|
autoPaint: false,
|
|
defaultNode: {
|
|
size: [10, 10],
|
|
color: 'steelblue',
|
|
style: {
|
|
lineWidth: 2,
|
|
fill: 'steelblue'
|
|
}
|
|
},
|
|
defaultEdge: {
|
|
size: 1,
|
|
style: {
|
|
stroke: '#e2e2e2',
|
|
lineAppendWidth: 2
|
|
},
|
|
},
|
|
nodeStateStyles: {
|
|
highlight: {
|
|
opacity: 1
|
|
},
|
|
dark: {
|
|
opacity: 0.2
|
|
}
|
|
},
|
|
edgeStateStyles: {
|
|
highlight: {
|
|
stroke: '#999'
|
|
}
|
|
}
|
|
});
|
|
|
|
function clearAllStats() {
|
|
graph.setAutoPaint(false);
|
|
graph.getNodes().forEach(function(node) {
|
|
graph.clearItemStates(node);
|
|
});
|
|
|
|
graph.getEdges().forEach(function(edge) {
|
|
graph.clearItemStates(edge);
|
|
});
|
|
graph.paint();
|
|
graph.setAutoPaint(true);
|
|
}
|
|
graph.on('node:mouseenter',
|
|
function(e) {
|
|
var item = e.item;
|
|
|
|
graph.setAutoPaint(false);
|
|
|
|
graph.getNodes().forEach(function(node) {
|
|
graph.clearItemStates(node);
|
|
graph.setItemState(node, 'dark', true);
|
|
});
|
|
|
|
graph.setItemState(item, 'dark', false);
|
|
graph.setItemState(item, 'highlight', true);
|
|
graph.getEdges().forEach(function(edge) {
|
|
if (edge.getSource() === item) {
|
|
graph.setItemState(edge.getTarget(), 'dark', false);
|
|
graph.setItemState(edge.getTarget(), 'highlight', true);
|
|
graph.setItemState(edge, 'highlight', true);
|
|
edge.toFront();
|
|
} else if (edge.getTarget() === item) {
|
|
graph.setItemState(edge.getSource(), 'dark', false);
|
|
graph.setItemState(edge.getSource(), 'highlight', true);
|
|
graph.setItemState(edge, 'highlight', true);
|
|
edge.toFront();
|
|
} else {
|
|
graph.setItemState(edge, 'highlight', false);
|
|
}
|
|
});
|
|
|
|
graph.paint();
|
|
graph.setAutoPaint(true);
|
|
});
|
|
graph.on('node:mouseleave', clearAllStats);
|
|
graph.on('canvas:click', clearAllStats);
|
|
|
|
graph.data({
|
|
nodes: data.nodes,
|
|
edges: data.edges.map(function(edge, i) {
|
|
edge.id = 'edge' + i;
|
|
return Object.assign({},
|
|
edge);
|
|
})
|
|
});
|
|
var simulation = d3.forceSimulation().force("link", d3.forceLink().id(function(d) {
|
|
return d.id;
|
|
}).strength(0.5)).force("charge", d3.forceManyBody()).force("center", d3.forceCenter(window.innerWidth / 2, window.innerHeight / 2));
|
|
simulation.nodes(data.nodes).on("tick", ticked);
|
|
simulation.force("link").links(data.edges);
|
|
|
|
graph.render();
|
|
|
|
function ticked() {
|
|
graph.refreshPositions();
|
|
graph.paint();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |