jQuery: Cytoscape.js お試せた5 (tap に反応して特定の url に飛びなはれ)

文字通り。

これの猿真似るだけ:

  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       {
 73         "position": { "y": -16792.949676513672, "x": 65225.502014160156 }, 
 74         "data": {
 75           "refs": 80, 
 76           "iata": "FUK", 
 77           "id": 2305
 78         }
 79       }, 
 80       /* ... snip ... */
 81     ], 
 82     "edges": [
 83       {
 84         "data": {
 85           "airline_id": 1, "source": 2305, "callsign": "STARFLYER", "id": "rt0", "target": 2359
 86         }
 87       }, 
 88       /* ... snip ... */
 89     ]
 90   },
 91 
 92 });
 93 cy.on("tap", "node", function() {
 94   var url = "http://www.gcmap.com/airport/" + this.data("iata");
 95   try { // your browser may block popups
 96     window.open(url);
 97   } catch(e) { // fall back on url change
 98     window.location.href = url;
 99   }
100 });
101 </script>
102 </body>
103 </html>