G6 - 增删改查

             <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>增删改查</title>
<script src="https://a.alipayobjects.com/jquery/jquery/1.11.1/jquery.js"></script>
<script src="https://gw.alipayobjects.com/os/antv/assets/g6/1.2.8/g6.min.js"></script>
      </head>
      <body>
          <div id="c1"></div>
 <script type="text/javascript">
$('body').append('<button id="addCircle">新增圆</button>');
$('body').append('<button id="addRect">新增矩形</button>');
$('body').append('<button id="delete">删除</button>');
$('body').append('<button id="findUpdate">查找并更新</button>');
var i = 1;
var btnAddCircle = $('#addCircle');
var btnAddRect = $('#addRect');
var btnDelete = $('#delete');
var btnFindUpdate = $('#findUpdate');
var data = {
  nodes: [],
  edges: []
};
var net = new G6.Net({
  id: 'c1',           // 容器ID
  height: 450         // 画布高
});
net.source(data.nodes, data.edges);
net.render();

btnAddCircle.on('click', function(ev){
  net.add('node', {
    shape: 'circle',
    id: 'id' + i++,
    x: 50 + i * 10,
    y: 50 + i * 10
  });
  net.refresh();
});

btnAddRect.on('click', function(ev){
  net.add('node', {
    shape: 'rect',
    id: 'id' + i++,
    x: 50 + i * 10,
    y: 50 + i * 10
  });
  net.refresh();
});

btnDelete.on('click', function(ev){
  if(i > 1){
    i = i-1;
    var item = net.find('id' + i);
    net.remove(item);
    net.refresh();
  }
});


btnFindUpdate.on('click', function(ev){
  if(i > 1){
    i = i-1;
    var item = net.find('id' + i);
    net.update(item, {
      color: 'red'
    });
    net.refresh();
  }
});

</script>

      </body>
    </html>
          
        
增删改查