jQuery: Cytoscape.js お試せた3(preset レイアウト, edge のラベル)

ほんとに「やってみた」でしかないレベル。

たぶん「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 の真ん中に表示するだけのつもりなら。)


Related Posts