jQuery: Cytoscape.js お試せた4 (mapData を使ってスタイルを動的に変える)

ちょっとは見栄えよく。

これだけでは不十分だ、と。デモだけ読んでても当然わからんわけで、ヒドいドキュメントからなんとか Mappers に辿り付けた。なるほど:

コードは今回はこんな感じ:

 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)",
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         "font-size": "mapData(refs, 1, 178, 20, 50)",
48         "width": "mapData(refs, 1, 178, 100, 400)",
49         "height": "mapData(refs, 1, 178, 100, 400)",
50 
51         /**
52           * see http://js.cytoscape.org/#style/node-body
53           * (triangle, star, roundrectangle, ...)
54           */
55         /*"shape": "square",*/
56       })
57     .selector("edge")
58       .css({
59         "content": "data(callsign)",
60         "target-arrow-shape": "triangle",
61         "curve-style": "bezier",
62 
63         "target-arrow-color": "mapData(airline_id, 1, 15, red, blue)",
64         "color": "mapData(airline_id, 1, 15, red, blue)",
65 
66         "width": 1,
67         "line-color": "mapData(airline_id, 1, 15, red, blue)",
68       }),
69 
70   elements: {
71     "nodes": [
72       /* ... snip ... */
73       {
74         "position": { "y": -17776.1495,  "x": 69889.9995 }, 
75         "data": { "refs": 178, "iata": "HND", "id": 2359 }
76       }, 
77       /* ... snip ... */
78     ], 
79     "edges": [
80       /* ... snip ... */
81       {
82         "data": {
83           "airline_id": 1,
84           "source": 2305, "callsign": "STARFLYER", "id": "rt0", "target": 2359
85         }
86       }, 
87       /* ... snip ... */
88     ]
89   },
90 
91 });
92 </script>
93 </body>
94 </html>