defaultEdge.html 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7. <title>默认-边</title>
  8. </head>
  9. <body>
  10. <div id="mountNode"></div>
  11. <script src="../build/g6.js"></script>
  12. <script>
  13. const data = {
  14. nodes: [{
  15. id: 'node1',
  16. x: 100,
  17. y: 200,
  18. },{
  19. id: 'node2',
  20. x: 300,
  21. y: 200,
  22. }],
  23. edges: [{
  24. source: 'node1',
  25. target: 'node2',
  26. label: '普通边'
  27. },{
  28. source: 'node1',
  29. target: {
  30. x: 100,
  31. y: 50
  32. },
  33. label: '单向悬空边'
  34. },{
  35. source: {
  36. x: 150,
  37. y: 50
  38. },
  39. target: {
  40. x: 150,
  41. y: 100
  42. },
  43. label: '双向悬空边'
  44. },{
  45. source: 'node1',
  46. target: {
  47. x: 100,
  48. y: 280,
  49. },
  50. style: {
  51. endArrow: true
  52. },
  53. label: '箭头'
  54. },{
  55. source: 'node1',
  56. target: {
  57. x: 10,
  58. y: 200,
  59. },
  60. sizesize: 4,
  61. label: '粗细'
  62. },{
  63. source: 'node2',
  64. target: {
  65. x: 400,
  66. y: 200,
  67. },
  68. color: 'red',
  69. label: '颜色'
  70. }]
  71. };
  72. const graph = new G6.Graph({
  73. container: 'mountNode',
  74. fitView: 'cc',
  75. height: window.innerHeight
  76. });
  77. graph.read(data);
  78. </script>
  79. </body>
  80. </html>