How to use the @antv/g6.Layouts 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 / ux / graphic / O.g6.tree.js View on Github external
export default (id, config, view = "cc") => {
    const items = Abs.clone(config.items);
    Cmn.drawRegistry();
    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 attrs = {
        id,
        layout,
        animate: true,
        fitView: view,
        fitViewPadding: 40,
github silentbalanceyh / vertx-ui / src / economy / designer / AttrTree / UI.Graphic.js View on Github external
}, 450, 'easeBackOut');
        },
    });
    G6.registerEdge('smooth', {
        getPath: function getPath(item) {
            const points = item.getPoints();
            const start = points[0];
            const end = points[points.length - 1];
            const hgap = Math.abs(end.x - start.x);
            if (end.x > start.x) {
                return [['M', start.x, start.y], ['C', start.x + hgap / 4, start.y, end.x - hgap / 2, end.y, end.x, end.y]];
            }
            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' // 自动缩放
github viserjs / viser / packages / viser-graph / src / graph.ts View on Github external
}

  public setEvent() {
    Object.keys(this.config.events || []).forEach((k) => {
      const eventName = k.replace('on', '').toLocaleLowerCase();
      this.graph.on(eventName, (ev: any) => {
        this.config.events[k](ev, this.graph);
      });
    });
  }
}

export const registerNode = G6.registerNode;
export const registerEdge = G6.registerEdge;
export const registerGuide = G6.registerGuide;
export const Layouts = G6.Layouts;
export const Util = G6.Util;
export const Plugins = G6.Plugins;
export const GlobalG6 = G6;