贝塞尔曲线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>贝塞尔曲线</title>
    <style>::-webkit-scrollbar{display:none;}html,body{overflow:hidden;margin:0;}</style>
</head>
<body>
<div id="mountNode"></div>
<script>/*Fixing iframe window.innerHeight 0 issue in Safari*/document.body.clientHeight;</script>
<script src="https://gw.alipayobjects.com/os/antv/pkg/_antv.g6-3.1.0/build/g6.js"></script>
<script>
  /**
   * 演示贝塞尔曲线的用法
   * 
   *  **/
  var data = {
    nodes: [{
      id: 'node0',
      x: 200,
      y: 10,
      size: 10
   }, {
      id: 'node1',
      x: 200,
      y: 50,
      label: '1222',
      shape: 'my-rect'
   }, {
      id: 'node2',
      x: 150,
      y: 150,
      shape: 'my-rect'
   }, {
      id: 'node3',
      x: 250,
      y: 150,
      shape: 'my-rect'
   }, {
      id: 'node4',
      x: 200,
      y: 250,
      shape: 'my-rect'
   }, {
      id: 'node5',
      x: 300,
      y: 300,
      label: '5',
      anchorPoints: [[0, 0.5], [1, 0.5]]
   }, {
      id: 'node6',
      x: 400,
      y: 250,
      label: '6',
      anchorPoints: [[0, 0.5], [1, 0.5]]
   }, {
      id: 'node7',
      x: 400,
      y: 350,
      label: '7',
      anchorPoints: [[0, 0.5], [1, 0.5]]
   }],
    edges: [{
      source: 'node0',
      target: 'node1'
   }, {
      source: 'node1',
      target: 'node2',
      shape: 'cubic-vertical'
   }, {
      source: 'node1',
      target: 'node3',
      shape: 'cubic-vertical'
   }, {
      source: 'node2',
      target: 'node4',
      shape: 'cubic-vertical'
   }, {
      source: 'node3',
      target: 'node4',
      shape: 'cubic-vertical'
   }, {
      source: 'node5',
      target: 'node6',
      shape: 'cubic-horizontal'
   }, {
      source: 'node5',
      target: 'node7',
      shape: 'cubic-horizontal'
   }]
  };
  G6.registerNode('my-rect', {
    getAnchorPoints: function getAnchorPoints() {
      return [[0.5, 0], [0.5, 1]];
    }
  }, 'rect');

var graph = new G6.Graph({
    container: 'mountNode',
    width: window.innerWidth,
    height: window.innerHeight,
    modes: {
      default: ['drag-canvas']
    }
  });
  graph.data(data);
  graph.render();
</script></body>
</html>

树图

流图

网图

图布局

动画

自定义元素

交互

文本

元素样式

辅助工具

复杂案例