antv G6实现拓扑树绘制

最新推荐文章于 2025-07-08 09:36:48 发布

原创

最新推荐文章于 2025-07-08 09:36:48 发布 · 1.4k 阅读

5 ·

CC 4.0 BY-SA版权

该博客介绍了如何使用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
              fil