linjinyu
/
g6
mirror of https://gitee.com/antvis/g6.git


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
							<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="mountNode"></div>
  <script src="../build/g6.js"></script>
  <script>
    /**
     * 该实例演示如何使用G6自定义类似饼图的节点
     * by 十吾
     * 
    */
    const lightBlue = 'rgb(119, 243, 252)';
    const lightOrange = 'rgb(230, 100, 64)';

    // 注册自定义名为 pie-node 的节点类型
    G6.registerNode('pie-node', {
      drawShape: (cfg, group) => {
        const radius = cfg.size / 2; // 节点半径
        const inPercentage = cfg.inDegree / cfg.degree; // 入度占总度数的比例
        const inAngle = inPercentage * Math.PI * 2; // 入度在饼图中的夹角大小
        const outAngle = Math.PI * 2 - inAngle; // 出度在饼图中的夹角大小
        const inArcEnd = [radius * Math.cos(inAngle), radius * Math.sin(inAngle)]; //入度饼图弧结束位置
        let isInBigArc = 1, isOutBigArc = 0;
        if (inAngle > Math.PI) {
          isInBigArc = 0;
          isOutBigArc = 1;
        }
        // 定义代表入度的扇形形状
        const fanIn = group.addShape('path', {
          attrs: {
            path: [
              [ 'M', radius, 0 ],
              [ 'A', radius, radius, 0, isInBigArc, 0, inArcEnd[0], inArcEnd[1] ],
              [ 'L', 0, 0 ],
              [ 'B' ]
            ],
            lineWidth: 0,
            fill: lightOrange
          }
        });
        // 定义代表出度的扇形形状
        const fanOut = group.addShape('path', {
          attrs: {
            path: [
              [ 'M', inArcEnd[0], inArcEnd[1] ],
              [ 'A', radius, radius, 0, isOutBigArc, 0, radius, 0 ],
              [ 'L', 0, 0 ],
              [ 'B' ]
            ],
            lineWidth: 0,
            fill: lightBlue
          }
        });
        // 返回 keyshape
        return fanIn;
      }
    },
    "single-shape"
    );  

    const data = {
      nodes: [
        {
          size: 80,
          inDegree: 80,
          degree: 360,
          x: 50,
          y: 200
        },
        {
          size: 80,
          inDegree: 280,
          degree: 360,
          x: 200,
          y: 200
        }
      ]
    }
    const graph = new G6.Graph({
      container: 'mountNode',
      width: 800,
      height: 600,
      defaultNode: {
        shape: 'pie-node'
      }
    })

    graph.data(data)
    graph.render()
  </script>
</body>
</html>