er-diagram.html 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="mountNode"></div>
  9. <script src="../build/g6.js"></script>
  10. <script src="../build/minimap.js"></script>
  11. <script>
  12. G6.registerEdge('relation', {
  13. draw(cfg, group) {
  14. const keyShape = group.addShape('path', {
  15. attrs: {
  16. path: [
  17. [ 'M', cfg.startPoint.x, cfg.startPoint.y ],
  18. [ 'L', cfg.endPoint.x, cfg.endPoint.y ]
  19. ],
  20. stroke: '#666',
  21. lineWidth: 2,
  22. lineAppendWidth: 4
  23. }
  24. });
  25. const center = keyShape.getPoint(0.5);
  26. const points = keyShape.getStartTangent();
  27. const angle = Math.atan((points[1][1] - points[0][1]) / (points[1][0] - points[0][0]));
  28. const shapeContainer = group.addGroup();
  29. /*shapeContainer.transform([
  30. ['t', -center.x, -center.y],
  31. ['r', angle],
  32. ['t', center.x, center.y]
  33. ]);*/
  34. shapeContainer.addShape('path', {
  35. attrs: {
  36. path: [
  37. [ 'M', center.x - 40, center.y ],
  38. [ 'L', center.x, center.y - 20 ],
  39. [ 'L', center.x + 40, center.y ],
  40. [ 'L', center.x, center.y + 20 ],
  41. [ 'Z' ]
  42. ],
  43. fill: '#fff',
  44. stroke: '#666'
  45. }
  46. });
  47. shapeContainer.addShape('text', {
  48. attrs: {
  49. text: cfg.relation,
  50. x: center.x,
  51. y: center.y,
  52. textAlign: 'center',
  53. textBaseline: 'middle',
  54. fill: '#666'
  55. }
  56. });
  57. let point = G6.Util.getLabelPosition(keyShape, 0, 10, 10, true);
  58. group.addShape('text', {
  59. attrs: {
  60. text: cfg.sourceEntity,
  61. x: point.x,
  62. y: point.y,
  63. rotate: point.rotate,
  64. fill: '#666'
  65. }
  66. });
  67. point = G6.Util.getLabelPosition(keyShape, 1, -15, 10, true);
  68. group.addShape('text', {
  69. attrs: {
  70. text: cfg.targetEntity,
  71. x: point.x,
  72. y: point.y,
  73. fill: '#666',
  74. rotate: point.rotate
  75. }
  76. });
  77. return keyShape;
  78. }
  79. });
  80. const minimap = new Minimap({ size: [ 160, 100 ] });
  81. const graph = new G6.Graph({
  82. container: 'mountNode',
  83. width: 800,
  84. height: 500,
  85. plugins: [ minimap ],
  86. modes: {
  87. default: [ 'drag-node', 'drag-canvas', 'zoom-canvas']
  88. }
  89. });
  90. const data = {
  91. nodes: [{
  92. id: 'customer',
  93. label: 'customer',
  94. x: 200,
  95. y: 200,
  96. shape: 'rect',
  97. size: [60, 40]
  98. }, {
  99. id: 'customer_id',
  100. label: 'customer_id',
  101. x: 120,
  102. y: 160,
  103. shape: 'ellipse',
  104. size: [80,40]
  105. }, {
  106. id: 'name',
  107. label: 'name',
  108. x: 140,
  109. y: 100,
  110. shape: 'ellipse',
  111. size: [80,40]
  112. }, {
  113. id: 'address',
  114. label: 'address',
  115. x: 180,
  116. y: 60,
  117. shape: 'ellipse',
  118. size: [80, 40]
  119. }, {
  120. id: 'email',
  121. label: 'email',
  122. x: 240,
  123. y: 110,
  124. shape: 'ellipse',
  125. size: [80, 40]
  126. }, {
  127. id: 'order',
  128. label: 'order',
  129. x: 400,
  130. y: 200,
  131. shape: 'rect',
  132. size: [60, 40]
  133. }, {
  134. id: 'order_id',
  135. label: 'order_id',
  136. x: 320,
  137. y: 130,
  138. shape: 'ellipse',
  139. size: [80, 40]
  140. }, {
  141. id: 'order_status',
  142. label: 'order_status',
  143. x: 380,
  144. y: 80,
  145. shape: 'ellipse',
  146. size: [80, 40]
  147. }, {
  148. id: 'total_price',
  149. label: 'total_price',
  150. x: 440,
  151. y: 150,
  152. shape: 'ellipse',
  153. size: [80, 40]
  154. }, {
  155. id: 'employee',
  156. label: 'employee',
  157. x: 380,
  158. y: 380,
  159. shape: 'rect',
  160. size: [60, 40]
  161. }, {
  162. id: 'employee_id',
  163. label: 'employee_id',
  164. x: 320,
  165. y: 440,
  166. shape: 'ellipse',
  167. size: [80, 40]
  168. }, {
  169. id: 'title',
  170. label: 'title',
  171. x: 440,
  172. y: 440,
  173. shape: 'ellipse',
  174. size: [80, 40]
  175. }],
  176. edges: [{
  177. id: 'c_id',
  178. source: 'customer',
  179. target: 'customer_id'
  180. }, {
  181. id: 'c_name',
  182. source: 'customer',
  183. target: 'name'
  184. }, {
  185. id: 'c_address',
  186. source: 'customer',
  187. target: 'address'
  188. }, {
  189. id: 'c_email',
  190. source: 'customer',
  191. target: 'email'
  192. }, {
  193. id: 'o_id',
  194. source: 'order',
  195. target: 'order_id'
  196. }, {
  197. id: 'o_price',
  198. source: 'order',
  199. target: 'total_price'
  200. }, {
  201. id: 'o_status',
  202. source: 'order',
  203. target: 'order_status'
  204. }, {
  205. id: 'c_o',
  206. source: 'customer',
  207. target: 'order',
  208. relation: 'places',
  209. sourceEntity: '1',
  210. targetEntity: 'N',
  211. shape: 'relation'
  212. }, {
  213. id: 'o_e',
  214. source: 'employee',
  215. target: 'order',
  216. relation: 'finalize',
  217. sourceEntity: '1',
  218. targetEntity: 'N',
  219. shape: 'relation'
  220. }, {
  221. id: 'e_id',
  222. source: 'employee',
  223. target: 'employee_id'
  224. }, {
  225. id: 'e_title',
  226. source: 'employee',
  227. target: 'title'
  228. }]
  229. };
  230. graph.data(data);
  231. graph.render();
  232. </script>
  233. </body>
  234. </html>