linjinyu
/
g6
의 미러 https://gitee.com/antvis/g6.git


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内置的节点和边</title>
</head>
<body>
<div id="mountNode"></div>
<script src="../build/g6.js"></script>
<script>
	const data = {
	  nodes: [{
	    x: 100,
	    y: 100,
	    shape: 'circle',
	    label: 'circle',
	    labelCfg: {
	      position: 'bottom'
	    }
	 },{
	    x: 200,
	    y: 100,
	    shape: 'rect',
	   	label: 'rect',
	   	labelCfg: {
	      position: 'bottom'
	    }
	 },{
	    x: 300,
	    y: 100,
	    size: [60, 30],
	    shape: 'ellipse',
	   	label: 'ellipse',
	   	labelCfg: {
	      position: 'bottom'
	    }
	 },{
	    x: 400,
	    y: 100,
	    shape: 'image',
	    img: 'https://gw.alipayobjects.com/zos/rmsportal/XuVpGqBFxXplzvLjJBZB.svg',
	   	label: 'image',
	   	labelCfg: {
	      position: 'bottom'
	    }
	 }
	 ],
	edges: [
	  {
	    source: {x: 100, y: 200},
	    target: {x: 200, y: 200},
	    label: 'line',
	    labelCfg: {
	      refY: 10
	    }
	  },
	  {
	    source: {x: 250, y: 200},
	    target: {x: 360, y: 200},
	    controlPoints: [{x: 300, y: 220}],
	    shape: 'polyline',
	    label: 'polyline',
	    labelCfg: {
	      refY: 10,
	      refX: 0
	    }
	  },
	  {
	    source: {x: 100, y: 300},
	    target: {x: 200, y: 300},
	    shape: 'quadratic',
	    label: 'quadratic',
	    labelCfg: {
	      refY: 10,
	      refX: 0
	    }
	  },{
	    source: {x: 250, y: 300},
	    target: {x: 360, y: 300},
	    shape: 'cubic',
	    label: 'cubic',
	    labelCfg: {
	      refY: 10,
	      refX: 0
	    }
	  }
	]};
	const graph = new G6.Graph({
    container: 'mountNode',
    width: 1000,
    height: 600
  });
  graph.data(data);
  graph.render();
</script>
</body>
</html>