How to use the @antv/g6.Tree function in @antv/g6

To help you get started, we’ve selected a few @antv/g6 examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github silentbalanceyh / vertx-ui / src / economy / designer / AttrTree / UI.Graphic.js View on Github external
}
            return [['M', start.x, start.y], ['C', start.x - hgap / 4, start.y, end.x + hgap / 2, end.y, end.x, end.y]];
        }
    });
    const layout = new G6.Layouts.CompactBoxTree({
        // direction: 'LR', // 方向(LR/RL/H/TB/BT/V)
        getHGap: function getHGap() /* d */ {
            // 横向间距
            return config.layout.hgap;
        },
        getVGap: function getVGap() /* d */ {
            // 竖向间距
            return config.layout.vgap;
        },
    });
    const tree = new G6.Tree({
        id,
        height: config.layout.height, // 画布高
        layout: layout,
        animate: true,
        fitView: 'cc' // 自动缩放
    });
    tree.node({
        shape: 'treeNode',
        size: 16
    }).label(function (obj) {
        return obj && obj.name ? obj.name : "";
    });
    tree.edge({
        shape: 'smooth'
    });
    tree.on('afterchange', function () {
github silentbalanceyh / vertx-ui / src / ux / graphic / O.g6.tree.js View on Github external
getVGap: function getVGap() /* d */ {
            // 竖向间距
            return config.layout.vgap;
        },
    });
    const attrs = {
        id,
        layout,
        animate: true,
        fitView: view,
        fitViewPadding: 40,
    };
    if (config.layout.height) {
        attrs.height = config.layout.height;
    }
    const tree = new G6.Tree(attrs);
    tree.node({
        shape: 'treeNode',
        size: 10
    }).label(function (obj) {
        return obj && obj.name ? obj.name : "";
    });
    tree.edge({
        shape: 'smooth'
    });
    tree.on('afterchange', function () {
        tree.getNodes().forEach(function (node) {
            if (node) {
                const label = node.getLabel();
                const keyShape = node.getKeyShape();
                const children = node.getChildren();
                const box = keyShape.getBBox();
github viserjs / viser / packages / viser-graph / src / graph.ts View on Github external
...graphConfig,
        ...this.config.graph,
      };
    }

    if (this.config.zoom) {
      graphConfig = {
        ...graphConfig,
        minZoom: this.config.zoom.min,
        maxZoom: this.config.zoom.max,
      };
    }

    switch (this.config.graph.type) {
      case 'tree':
        this.graph = new G6.Tree(graphConfig);
        break;
      case 'graph':
        this.graph = new G6.Graph(graphConfig);
        break;
      default:
        this.graph = new G6.Graph(graphConfig);
    }

  }