せめて「四角い箱の中にラベルがいる」のがええなぁ、と目論んでみる。四角くするデモがそもそもないのでツラかったが、それでもすぐに見つけたし。
が、これがよろしくない。ラベルの大きさに合わせてくんない。この issue はどうなっちゃったのかがあんましよくわかってない。(jQuery そのものにまだまだ不慣れなこともあってな、追いかけきれんのです。)
仕方がないので、ちょっと相当に愚直な手段で:
1 <html>
2 <head jang="ja">
3 <meta charset="UTF-8">
4 <link href="https://cdnjs.cloudflare.com/ajax/libs/tabulator/3.3.2/css/tabulator_site.min.css" rel="stylesheet">
5 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
7
8 <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.7/cytoscape.min.js"></script>
9
10 <script src="https://cdn.rawgit.com/cpettitt/dagre/v0.7.4/dist/dagre.min.js"></script>
11 <script src="https://cdn.rawgit.com/cytoscape/cytoscape.js-dagre/1.5.0/cytoscape-dagre.js"></script>
12 <style>
13 #cy {
14 width: 100%; /* MUST */
15 height: 100%; /* MUST */
16
17 /**
18 position: absolute;
19 left: 0;
20 top: 0;
21 z-index: 999;
22 */
23 }
24 </style>
25 </head>
26 <body>
27 <div id="cy"></div>
28 <script>
29 var cy = window.cy = cytoscape({
30 container: document.getElementById('cy'),
31
32 boxSelectionEnabled: false,
33 autounselectify: true,
34
35 layout: {
36 name: 'dagre'
37 },
38 style: cytoscape.stylesheet()
39 .selector("node")
40 .css({
41 "content": "data(id)", /* must be specified if you want to display the node text */
42 "text-valign": "center",
43 "text-halign": "center",
44 "color": "black",
45 "text-outline-width": 2,
46 "text-outline-color": "white",
47 /**
48 "text-opacity": 0.5,
49 */
50 "background-color": "#479e11",
51 "background-opacity": 0.5,
52
53 /**
54 * see http://js.cytoscape.org/#style/node-body
55 * (triangle, star, roundrectangle, ...)
56 */
57 "shape": "square",
58
59 "width": 144,
60 })
61 .selector("edge")
62 .css({
63 "target-arrow-shape": "triangle",
64 "curve-style": "bezier",
65 "target-arrow-color": "#9dbaea",
66 "width": 4,
67 "line-color": "#9dbaea",
68 }),
69
70 elements: {
71 "nodes": [
72 { "data": { "id": "5th Edition " } },
73 { "data": { "id": "6th Edition " } },
74 { "data": { "id": " PWB 1.0 " } },
75 { "data": { "id": " LSX " } },
76 { "data": { "id": " 1 BSD " } },
77 { "data": { "id": " Mini Unix " } },
78 { "data": { "id": " Wollongong " } },
79 { "data": { "id": " Interdata " } },
80 { "data": { "id": "Unix/TS 3.0 " } },
81 { "data": { "id": " PWB 2.0 " } },
82 { "data": { "id": "7th Edition " } },
83 { "data": { "id": "8th Edition " } },
84 { "data": { "id": " 32V " } },
85 { "data": { "id": " V7M " } },
86 { "data": { "id": " Ultrix-11 " } },
87 { "data": { "id": " Xenix " } },
88 { "data": { "id": " UniPlus+ " } },
89 { "data": { "id": "9th Edition " } },
90 { "data": { "id": " 2 BSD " } },
91 { "data": { "id": " 2.8 BSD " } },
92 { "data": { "id": " 2.9 BSD " } },
93 { "data": { "id": " 3 BSD " } },
94 { "data": { "id": " 4 BSD " } },
95 { "data": { "id": " 4.1 BSD " } },
96 { "data": { "id": " 4.2 BSD " } },
97 { "data": { "id": " 4.3 BSD " } },
98 { "data": { "id": " Ultrix-32 " } },
99 { "data": { "id": " PWB 1.2 " } },
100 { "data": { "id": " USG 1.0 " } },
101 { "data": { "id": " CB Unix 1 " } },
102 { "data": { "id": " USG 2.0 " } },
103 { "data": { "id": " CB Unix 2 " } },
104 { "data": { "id": " CB Unix 3 " } },
105 { "data": { "id": " Unix/TS++ " } },
106 { "data": { "id": "PDP-11 Sys V" } },
107 { "data": { "id": " USG 3.0 " } },
108 { "data": { "id": "Unix/TS 1.0 " } },
109 { "data": { "id": " TS 4.0 " } },
110 { "data": { "id": " System V.0 " } },
111 { "data": { "id": " System V.2 " } },
112 { "data": { "id": " System V.3 " } }
113 ],
114 "edges": [
115 { "data": { "source": "5th Edition ", "target": "6th Edition " } },
116 { "data": { "source": "5th Edition ", "target": " PWB 1.0 " } },
117 { "data": { "source": "6th Edition ", "target": " LSX " } },
118 { "data": { "source": "6th Edition ", "target": " 1 BSD " } },
119 { "data": { "source": "6th Edition ", "target": " Mini Unix " } },
120 { "data": { "source": "6th Edition ", "target": " Wollongong " } },
121 { "data": { "source": "6th Edition ", "target": " Interdata " } },
122 { "data": { "source": " Interdata ", "target": "Unix/TS 3.0 " } },
123 { "data": { "source": " Interdata ", "target": " PWB 2.0 " } },
124 { "data": { "source": " Interdata ", "target": "7th Edition " } },
125 { "data": { "source": "7th Edition ", "target": "8th Edition " } },
126 { "data": { "source": "7th Edition ", "target": " 32V " } },
127 { "data": { "source": "7th Edition ", "target": " V7M " } },
128 { "data": { "source": "7th Edition ", "target": " Ultrix-11 " } },
129 { "data": { "source": "7th Edition ", "target": " Xenix " } },
130 { "data": { "source": "7th Edition ", "target": " UniPlus+ " } },
131 { "data": { "source": " V7M ", "target": " Ultrix-11 " } },
132 { "data": { "source": "8th Edition ", "target": "9th Edition " } },
133 { "data": { "source": " 1 BSD ", "target": " 2 BSD " } },
134 { "data": { "source": " 2 BSD ", "target": " 2.8 BSD " } },
135 { "data": { "source": " 2.8 BSD ", "target": " Ultrix-11 " } },
136 { "data": { "source": " 2.8 BSD ", "target": " 2.9 BSD " } },
137 { "data": { "source": " 32V ", "target": " 3 BSD " } },
138 { "data": { "source": " 3 BSD ", "target": " 4 BSD " } },
139 { "data": { "source": " 4 BSD ", "target": " 4.1 BSD " } },
140 { "data": { "source": " 4.1 BSD ", "target": " 4.2 BSD " } },
141 { "data": { "source": " 4.1 BSD ", "target": " 2.8 BSD " } },
142 { "data": { "source": " 4.1 BSD ", "target": "8th Edition " } },
143 { "data": { "source": " 4.2 BSD ", "target": " 4.3 BSD " } },
144 { "data": { "source": " 4.2 BSD ", "target": " Ultrix-32 " } },
145 { "data": { "source": " PWB 1.0 ", "target": " PWB 1.2 " } },
146 { "data": { "source": " PWB 1.0 ", "target": " USG 1.0 " } },
147 { "data": { "source": " PWB 1.2 ", "target": " PWB 2.0 " } },
148 { "data": { "source": " USG 1.0 ", "target": " CB Unix 1 " } },
149 { "data": { "source": " USG 1.0 ", "target": " USG 2.0 " } },
150 { "data": { "source": " CB Unix 1 ", "target": " CB Unix 2 " } },
151 { "data": { "source": " CB Unix 2 ", "target": " CB Unix 3 " } },
152 { "data": { "source": " CB Unix 3 ", "target": " Unix/TS++ " } },
153 { "data": { "source": " CB Unix 3 ", "target": "PDP-11 Sys V" } },
154 { "data": { "source": " USG 2.0 ", "target": " USG 3.0 " } },
155 { "data": { "source": " USG 3.0 ", "target": "Unix/TS 3.0 " } },
156 { "data": { "source": " PWB 2.0 ", "target": "Unix/TS 3.0 " } },
157 { "data": { "source": "Unix/TS 1.0 ", "target": "Unix/TS 3.0 " } },
158 { "data": { "source": "Unix/TS 3.0 ", "target": " TS 4.0 " } },
159 { "data": { "source": " Unix/TS++ ", "target": " TS 4.0 " } },
160 { "data": { "source": " CB Unix 3 ", "target": " TS 4.0 " } },
161 { "data": { "source": " TS 4.0 ", "target": " System V.0 " } },
162 { "data": { "source": " System V.0 ", "target": " System V.2 " } },
163 { "data": { "source": " System V.2 ", "target": " System V.3 " } }
164 ]
165 },
166
167 });
168 </script>
169 </body>
170 </html>
固定 width を与えつつ、文字列を「文字列としてセンタリング」しちゃったわけね。一つ前ので書いたように、「どーせサーバサイド(とか他の何か手段)で自動生成すんだべ」てことなら、まぁこういう「機械的(でバカ)」なのも悪くはなかろ、と割り切ってしまえ、て話。かくして：
もっといいやり方があるのかもしらんし、実は この issue は解決済みで新たなシカケが提供されたとかもあるかもしれんのだけれど、いずれにしても「GraphViz 並に色々」やろうとするなら、まだちょっと手間が多そうだね。
