ほんとに「やってみた」でしかないレベル。
たぶん「layout: "preset"
」が自動レイアウトに頼らないマニュアル位置決めモード、てことだと思う。ので、デモでは「東京の路線図」なんてことをしてるし、ならばアタシは「民間航空国内線路線図」してみるかと:
データは Openflights より。
こんなことをしてる:
1 <html>
2 <head jang="ja">
3 <meta charset="UTF-8">
4 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
5 <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.7/cytoscape.min.js"></script>
6 <style>
7 #cy {
8 width: 100%; /* MUST */
9 height: 100%; /* MUST */
10
11 /**
12 position: absolute;
13 left: 0;
14 top: 0;
15 z-index: 999;
16 */
17 }
18 </style>
19 </head>
20 <body>
21 <div id="cy"></div>
22 <script>
23 var cy = window.cy = cytoscape({
24 container: document.getElementById('cy'),
25
26 boxSelectionEnabled: false,
27 autounselectify: true,
28
29 layout: {
30 name: 'preset'
31 },
32 style: cytoscape.stylesheet()
33 .selector("node")
34 .css({
35 "content": "data(iata)", /* must be specified if you want to display the node text */
36 "text-valign": "center",
37 "text-halign": "center",
38 "color": "black",
39 "text-outline-width": 2,
40 "text-outline-color": "white",
41 /**
42 "text-opacity": 0.5,
43 */
44 "background-color": "#479e11",
45 "background-opacity": 0.5,
46
47 /**
48 * see http://js.cytoscape.org/#style/node-body
49 * (triangle, star, roundrectangle, ...)
50 */
51 /*"shape": "square",*/
52 })
53 .selector("edge")
54 .css({
55 "content": "data(airline)", /* must be specified if you want to display the node text */
56 "curve-style": "bezier",
57 "width": 1,
58 "line-color": "#9dbaea",
59 }),
60
61 elements: {
62 "nodes": [
63 /* ... snip ... */
64 {
65 "position": { "y": -7110.4598, "x": 27955.9998 },
66 "data": { "iata": "HND", "id": 2359 }
67 },
68 {
69 "position": { "y": -6885.459899902344, "x": 27048.800659179688 },
70 "data": { "iata": "KIX", "id": 3992 }
71 },
72 /* ... snip ... */
73 ],
74 "edges": [
75 /* ... snip ... */
76 {
77 "data": { "source": 2305, "target": 2359, "id": "rt0", "airline": "STARFLYER" }
78 },
79 /* ... snip ... */
80 ]
81 },
82
83 });
84 </script>
85 </body>
86 </html>
ポイントは、
layout: "preset"
は追加ライブラリを必要としない。position
で位置指定するが、座標系が「(0, 0)が左上」なのに注意。つまり緯度から変換する場合は、符号を反転させる必要がある。- edge のラベルは node に対するのと同じノリでいい。(edge の真ん中に表示するだけのつもりなら。)