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">
var data = {
  "nodes": [
    {
      "x": 140,
      "y": 210,
      "id": "node1"
    },
    {
      "x": 270,
      "y": 210,
      "id": "node2"
    }
  ],
  "edges": [
    {
      "source": "node1",
      "id": "edge1",
      "target": "node2"
    }
  ]
};
var net = new G6.Net({
    id: 'c1',              // 容器ID
    modes: {               // 模式集
      // 默认模式
      default: [
        'dragNode', 'dragEdge', 'dragBlank', 'clickBlankClearActive', 'resizeEdge', 'clickActive',
        'resizeNode', 'wheelZoom'
      ],
      // 编辑模式
      edit: [
        'dragNode', 'dragEdge', 'clickBlankClearActive', 'resizeEdge', 'clickActive',
        'multiSelect', 'resizeNode', 'shortcut', 'wheelZoom'
      ]
    },
    mode: 'default',       // 当前模式
    height: 450            // 画布高
  });
net.source(data.nodes, data.edges);
net.render();

// 第二步：设置按钮
$('#c1').prepend('<button id="addClickActive">添加点击激活行为</button>');
$('#c1').prepend('<button id="removeClickActive">删除点击激活行为</button>');
$('#c1').prepend('<button id="changeModeToDefault">切换到默认模式</button>');
$('#c1').prepend('<button id="changeModeToEidt">切换到编辑模式</button>');

var addClickActive = $('#addClickActive');
var removeClickActive = $('#removeClickActive');
var changeModeToDefault = $('#changeModeToDefault');
var changeModeToEidt = $('#changeModeToEidt');

addClickActive.on('click', function(){
  net.addBehaviour(['clickActive']);
});

removeClickActive.on('click', function(){
  net.removeBehaviour(['clickActive']);
});

changeModeToDefault.on('click', function(){
  net.changeMode('default');
});

changeModeToEidt.on('click', function(){
  net.changeMode('edit');
});

</script>

      </body>
    </html>
          
行为与模式