customDraw.html 1.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354
  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. {
  16. "shape": "customNode",
  17. "id": "node1"
  18. }
  19. ],
  20. };
  21. G6.registerNode('customNode', {
  22. draw(item){
  23. const group = item.getGraphicGroup();
  24. group.addShape('text', {
  25. attrs: {
  26. x: 100,
  27. y: 100,
  28. fill: '#333',
  29. text: '我是一个自定义节点,\n有下面那个方形和我自己组成'
  30. }
  31. });
  32. return group.addShape('rect', {
  33. attrs: {
  34. x: 100,
  35. y: 100,
  36. width: 100,
  37. height: 100,
  38. stroke: 'red'
  39. }
  40. });
  41. }
  42. });
  43. const graph = new G6.Graph({
  44. container: 'mountNode', // 容器ID
  45. fitView: 'cc',
  46. height: window.innerHeight
  47. });
  48. graph.read(data);
  49. </script>
  50. </body>
  51. </html>