G6 图表示例
源码
​x
 
1
<!DOCTYPE html>
2
<html>
3
  <head>
4
    <meta charset="utf-8">
5
    <title>锚点配置</title>
6
    <script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
7
    <script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
8
  </head>
9
  <body>
10
    <div id="c1"></div>
11
    <script type="text/javascript">
12
      var invalidCfg = {
13
        style: {
14
          fill: 'red',
15
          fillOpacity: 0.7
16
        },
17
        hoverStyle: {
18
          stroke: null
19
        },
20
        linkable: false
21
      };
22
      G6.registNode('custom1', {
23
        getAnchorPoints: function(){
24
          return [
25
            [0, 0.5, invalidCfg],
26
            [0.5, 0],
27
            [1, 0.5]
28
          ];
29
        }
30
      });
31
      G6.registNode('custom2', {
32
        getAnchorPoints: function(){
33
          return [
34
            [0, 0.5],
35
            [1, 0.5, invalidCfg]
36
          ];
37
        }
38
      });
39
      var data = {
40
        nodes: [
41
          {
42
            x: 240,
43
            y: 210,
44
            id: 'node1',
45
            shape: 'custom1'
46
          },
47
          {
48
            x: 370,
49
            y: 170,
50
            id: 'node2',
51
            shape: 'custom2'
52
          },
53
        ],
54
        edges: [
55
          {
56
            source: 'node1',
57
            id: 'edge1',
58
            target: 'node2',
59
          },
60
        ],
61
      };
62
      var net = new G6.Net({
63
        id: 'c1',      // 容器ID
64
        width: 500,    // 画布宽
65
        height: 500,   // 画布高
66
        mode: 'edit'
67
      });
68
      net.source(data.nodes, data.edges);
69
      net.render();
70
    </script>
71
  </body>
72
</html>
73
​

锚点配置