antv G6实现拓扑树绘制

<template>
  <div id="antV-G6"></div>
</template>

<script>
import G6 from '@antv/g6';
export default {
  name: 'G6',
  mounted () {
    this.int();
  },
  methods: {
    int () {
      G6.registerNode('card-node', {
        draw: function drawShape (cfg, group) {
          const r = 2;
          const color = '#5B8FF9';
          const w = cfg.size[0];
          const h = cfg.size[1];
          const shape = group.addShape('rect', {
            attrs: {
              x: -w / 2,
              y: -h / 2,
              width: w, // 200,
              height: h, // 60
              stroke: color,
              radius: r,
              fill: '#fff'
            },
            name: 'main-box',
            draggable: true
          });

          group.addShape('rect', {
            attrs: {
              x: -w / 2,
              y: -h / 2,
              width: w, // 200,
              height: h / 2, // 60
              fill: color,
              radius: [r, r, 0, 0]
            },
            name: 'title-box',
            draggable: true
          });

          // title text
          group.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: -w / 2 + 8,
              y: -h / 2 + 2,
              lineHeight: 20,
              text: cfg.id,
              fill: '#fff'
            },
            name: 'title'
          });
          cfg.children &&
            group.addShape('marker', {
              attrs: {
                x: w / 2,
                y: 0,
                r: 6,
                cursor: 'pointer',
                symbol: G6.Marker.collapse,
                stroke: '#666',
                lineWidth: 1,
                fill: '#fff'
              },
              name: 'collapse-icon'
            });
          group.addShape('text', {
            attrs: {
              textBaseline: 'top',
              x: -w / 2 + 8,
              y: -h / 2 + 24,
              lineHeight: 20,
              text: cfg.des || `${cfg.id} -- ${cfg.type}`,
              fill: 'rgba(0,0,0, 1)'
            },
            name: `description`
          });
          return shape;
        },
        setState (name, value, item) {
          if (name === 'collapsed') {
            const marker = item.get('group').find((ele) => ele.get('name') === 'collapse-icon');
            const icon = value ? G6.Marker.expand : G6.Marker.collapse;
            marker.attr('symbol', icon);
          }
        }
      });

      const data = {
        id: 'A',
        children: [
          {
            id: 'A1',
            des: '哈哈哈哈哈',
            children: [{ id: 'A11' }, { id: 'A12' }, { id: 'A13' }, { id: 'A14' }]
          },
          {
            id: 'A2',
            children: [
              {
                id: 'A21',
                children: [{ id: 'A211' }, { id: 'A212' }]
              },
              {
                id: 'A22'
              }
            ]
          }
        ]
      };

      const container = document.getElementById('antV-G6');
      const width = container.scrollWidth;
      const height = container.scrollHeight || 500;

      const graph = new G6.TreeGraph({
        container: 'antV-G6',
        width,
        height,
        modes: {
          default: ['drag-canvas']
        },
        defaultNode: {
          type: 'card-node',
          size: [200, 40] // 卡片node长宽
        },
        defaultEdge: {
          type: 'cubic-horizontal',
          style: {
            endArrow: true
          }
        },
        layout: {
          type: 'indented',
          direction: 'LR', // 中间节点的方向
          dropCap: false,
          indent: 250,
          getHeight: () => {
            return 60;
          }
        }
      });

      graph.data(data);
      graph.render();
      graph.fitView();
      graph.on('node:click', (e) => {
        console.log(e, 'node节点数据=');
        if (e.target.get('name') === 'collapse-icon') {
          e.item.getModel().collapsed = !e.item.getModel().collapsed;
          graph.setItemState(e.item, 'collapsed', e.item.getModel().collapsed);
          graph.layout();
        }
      });

      if (typeof window !== 'undefined') {
        window.onresize = () => {
          if (!graph || graph.get('destroyed')) return;
          if (!container || !container.scrollWidth || !container.scrollHeight) return;
          graph.changeSize(container.scrollWidth, container.scrollHeight);
        };
      }
    }
  }
};
</script>

<style lang="less">
#antV-G6 {
  width: 100%;
  height: 800px;
  margin: 0 auto;
  border:10px solid #ccc;
}
</style>