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
      $('body').append('<button id="addCircle">新增圆</button>');
13
      $('body').append('<button id="addRect">新增矩形</button>');
14
      $('body').append('<button id="delete">删除</button>');
15
      $('body').append('<button id="findUpdate">查找并更新</button>');
16
      var i = 1;
17
      var btnAddCircle = $('#addCircle');
18
      var btnAddRect = $('#addRect');
19
      var btnDelete = $('#delete');
20
      var btnFindUpdate = $('#findUpdate');
21
      var data = {
22
        nodes: [],
23
        edges: []
24
      };
25
      var net = new G6.Net({
26
        id: 'c1',           // 容器ID
27
        height: 450         // 画布高
28
      });
29
      net.source(data.nodes, data.edges);
30
      net.render();
31
      btnAddCircle.on('click', function(ev){
32
        net.add('node', {
33
          shape: 'circle',
34
          id: 'id' + i++,
35
          x: 50 + i * 10,
36
          y: 50 + i * 10
37
        });
38
        net.refresh();
39
      });
40
      btnAddRect.on('click', function(ev){
41
        net.add('node', {
42
          shape: 'rect',
43
          id: 'id' + i++,
44
          x: 50 + i * 10,
45
          y: 50 + i * 10
46
        });
47
        net.refresh();
48
      });
49
      btnDelete.on('click', function(ev){
50
        if(i > 1){
51
          i = i-1;
52
          var item = net.find('id' + i);
53
          net.remove(item);
54
          net.refresh();
55
        }
56
      });
57
      btnFindUpdate.on('click', function(ev){
58
        if(i > 1){
59
          i = i-1;
60
          var item = net.find('id' + i);
61
          net.update(item, {
62
            color: 'red'
63
          });
64
          net.refresh();
65
        }
66
      });
67
    </script>
68
  </body>
69
</html>
70
​

增删改查