当前位置: 首页 > 工具软件 > AntV - G6 > 使用案例 >

antv/G6使用详细介绍,一篇文章说清antv G6如何使用

闾丘玮
2023-12-01

前言

AntV 是蚂蚁金服全新一代数据可视化解决方案,致力于提供一套简单方便、专业可靠、无限可能的数据可视化最佳实践。

G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。

它是一款国产可视化插件,中文官方文档方便阅读和学习。G6可以实现很多d3才能实现的可视化图表,d3作为一款国外很强大的可视化插件,它的官方文档是非汉语文档,社区虽然很活跃,但几乎是英文文档,阅读和学习起来并不是那么轻松,尤其是英语不太好的同学,阅读和学习d3更吃力。这时候G6就是不错的选择。因为G6包含丰富的图表类型,还可以实现节点,边等自定义。

使用步骤

安装&引入

npm install --save @antv/g6	//安装

import G6 from '@antv/g6';	//在需要的js文件引入

使用

创建容器

<div id="container"></div>
<style>
#container{
  width: 100%;
  height: 800px;
}
</style>

数据格式

const data = {
// 节点
  nodes: [
    {
      id: 'node1',
      x: 100,
      y: 200,
    },
    {
      id: 'node2',
      x: 300,
      y: 200,
    },
  ],
  // 边集
  edges: [
    // 表示一条从 node1 节点连接到 node2 节点的边
    {
      source: 'node1',
      target: 'node2',
    },
  ],
};

节点样式

主要包括nodes(节点)和edges(边),节点是画布上显示的小矩形,边是两个节点的连线,节点样式可以设置为

  • circle:圆;
  • rect:矩形;
  • ellipse:椭圆;
  • polygon:多边形;
  • fan:扇形;
  • image:图片;
  • marker:标记;
  • path:路径;
  • text:文本;
  • dom(svg):DOM(图渲染方式 renderer'svg' 时可用)。

常用方法

  • draw()画布的绘制方法。新增shape或group后,调用此方法将最新的内容渲染到画布上。
  • changeSize(width, height)改变画布的大小
  • getClientByPoint(x, y)将窗口坐标转换为canvas坐标。
  • getPointByClient(x, y)将canvas坐标转换为窗口坐标。
  • on(eventType, callback)绑定事件。
  • off(eventType, callback)事件解绑。
  • addShape(shape, attrs)添加单个图形到画布。
  • addGroup(attrs)添加单个组到画布。
  • attr()设置或获取实例的绘图属性,无参数获取,有参数更新
  • set(name, value)设置实例的属性,如visible, zIndex, id等。
  • get(name)获取实例的属性值
  • show()显示某实例对应的图形。
  • hide()隐藏某实例对应的图形
  • remove()删除实例本身
  • destroy()销毁实例
  • getBBox()获取实例的包围盒

graph method

  • graph.save()
  • graph.read(data) 读数据渲染
  • graph.find(id) 寻找数据模型
  • graph.add(type, model)
  • graph.remove(item)
  • graph.update(item, model) item为id或 项对象
  • graph.getItems();获取图内所有项
  • graph.getNodes()
  • graph.getEdges()
  • graph.getGroups()
  • graph.preventAnimate(callback) 阻止动画
  • getShape(x,y)返回该坐标点最上层的元素。
  • findById(id)根据元素ID返回对应的实例

案例

  • 脑图有个特点,就是传入data可以不需要提供x,y,new了graph之后,自动生成了x,y,然后方向可以在node里进行配置:
let centerX = 0;
graph.node(function (node: NodeConfig) {
    if (node.id === "root") {
        centerX = node.x as number;//把第一个节点的x作为center
    }

    return {
        label: node.id,
        labelCfg: {
            position://看有没有孩子和孩子数量配置左右
                node.children && node.children.length > 0
                    ? "right"
                    : (node.x as number) > centerX
                    ? "right"
                    : "left",
            offset: 5,
        },
    };
});

  • 节点拖拽移动。主要监听node:drag事件,然后去取鼠标的xy,转换为graph的xy,最后赋给节点。
graph.on("node:dragstart", (e: any) => {
    const item = e.item;
    const model = item.getModel();
    model.style.cursor = "grab";
    graph.update(item, model);
    graph.paint();
});

graph.on("node:drag", (e: any) => {
    // 鼠标所在位置 转化为现在目标节点所在位置
    const { clientX, clientY } = e;
    // 将视口坐标转换为屏幕/页面坐标。
    const point = graph.getPointByClient(clientX, clientY);
    const item = e.item;
    const model = item.getModel();
    item.updatePosition(point);
    graph.update(item, model);
    graph.paint();
});

graph.on("node:dragend", (e: any) => {
    const item = e.item;
    const model = item.getModel(); //直接取得model没style。。。
    model.style.cursor = "default";
    graph.update(item, model);
    graph.paint();
});
graph.on("canvas:drag", (e: any) => {
    //	console.log(e);
});
graph.on("dragstart", (e: any) => {
    //比node:dragstart先
});
graph.on("mousedown", (e: any) => {
    //比dragstart先
    const item = e.item;
    if (item) {
        const model = item.getModel();

        model.style.cursor = "grab";
        graph.update(item, model);
        graph.paint();
    }
});

自定义节点

  • 其实是先注册个节点,注册节点时,可以利用addshape做节点样子,同时可以绑定事件,给节点赋文本。
  • 需要注意是这里用的是图形分组概念,g6里面不知道哪个人搞了那么多名字全是group要么是groups很难区分。
  • 通过一个g6实例的group,可以找到其所属的item。
import React, { useEffect, useRef } from "react";
import G6 from "@antv/g6";
import { NodeConfig } from "@antv/g6/lib/types";
import GGroup from "@antv/g-canvas/lib/group";
import { IShape } from "@antv/g-canvas/lib/interfaces";
const data = {
    nodes: [
        {
            id: "Model",
            type: "model-node", //这个就是注册的
            x: 100,
            y: 100,
            style: {
                width: 160,
                height: 100,
                fill: "#f1b953",
                stroke: "#f1b953",
            },
            openIcon: {
                x: 180, // 控制图标在横轴上的位置
                y: 45, // 控制图标在纵轴上的位置
                fontSize: 20,
                style: {
                    fill: "#fc0",
                },
            },
            hideIcon: {
                x: 180, // 控制图标在横轴上的位置
                y: 45, // 控制图标在纵轴上的位置
                fontSize: 20,
                style: {
                    fill: "#666",
                },
            },
            labels: [
                {
                    x: 10,
                    y: 20,
                    label: "标题,最长10个字符~~",
                    labelCfg: {
                        fill: "#666",
                        fontSize: 14,
                        maxlength: 10,
                    },
                },
                {
                    x: 10,
                    y: 40,
                    label: "描述,最长12个字333符~~~",
                        labelCfg: {
                            fontSize: 12,
                            fill: "#999",
                            maxlength: 12,
                        },
                    },
            ],
        },
        {
            id: "node1", // String,该节点存在则必须,节点的唯一标识
            x: 100, // Number,可选,节点位置的 x 值
            y: 200, // Number,可选,节点位置的 y 值
        },
    ],
};

interface modelNodeType extends NodeConfig {
    openIcon: {
        x: number;
        y: number;
        fontSize: number;
        style: Object;
    };
    hideIcon: {
        x: number;
        y: number;
        fontSize: number;
        style: Object;
    };
    labels: Array<any>;
}

// 注册自定义节点
G6.registerNode(
    "model-node",
    {
        drawShape(cfg: modelNodeType, group) {
            const opts = cfg;
            const openIcon = opts.openIcon;
            const hideIcon = opts.hideIcon;
            // 添加节点
            const shape = group!.addShape("rect", {
                    name: "model-node",
                    draggable: true, // 让自定义节点支持拖拽
                    attrs: cfg.style,
            });

            const openSwitch = group!.addShape("circle", {
                draggable: true,
                attrs: {
                    r: 10,
                    ...openIcon,
                    ...openIcon.style,
                },
                className: "state-open",
            });

            const hideSwitch = group!.addShape("circle", {
                draggable: true,
                attrs: {
                    r: 10,
                    ...hideIcon,
                    ...hideIcon.style,
                },
                className: "state-hide",
            });

            // 添加多行文本
            for (let i = 0; i < cfg.labels.length; i++) {
                const item = cfg.labels[i];
                const {
                    label,
                    labelCfg: { maxlength },
                } = item;

                let text = maxlength ? label.substr(0, maxlength) : label || "";

                if (label.length > maxlength) {
                    text = `${text}...`;
                }

                group!.addShape("text", {
                    attrs: {
                        text,
                        ...item,
                        ...item.labelCfg,
                    },
                });
            }
            this.bindEvent(group, openSwitch);
            this.bindEvent(group, hideSwitch);

            return shape;
        },
        bindEvent(group: GGroup, btn: IShape) {
            //ggroup就是graphics group缩写
            btn.on("click", () => {
                const open = group
                    .get("children")
                    .find((child: any) => child.cfg.className === "state-open");
                    const close = group
                        .get("children")
                        .find((child: any) => child.cfg.className === "state-hide");
                    if (btn.cfg.className === "state-open") {
                        const item = group.get("item"); //在这个图形分组下的item
                        const model = item.getModel();
                        open.toBack();
                        close.toFront(); //这个是让2个圆z轴位置变化 item上的方法
                        model.style.height = 100;
                        item.update(model);
                    } else if (btn.cfg.className === "state-hide") {
                        const item = group.get("item");
                        const model = item.getModel();
                        close.toBack(); //Item 上的方法
                        open.toFront(); //item上的方法
                        model.style.height = 50;
                        item.update(model); //item上的方法
                    }
                });
            },
	},
    "single-node"
); // 继承自内置节点
function App() {
    const ref = useRef<HTMLDivElement>(null);
    useEffect(() => {
        const graph = new G6.Graph({
            container: ref.current!,
            width: 800,
            height: 800,
            // renderer: 'svg',
            fitCenter: true,
            modes: {
                default: ["drag-canvas", "zoom-canvas", "drag-node"],
            },
        });
        // 传入数据
        graph.data(data);
        // 执行渲染
        graph.render();
        // graph.fitView();
    }, []);

    return <div ref={ref} id="container"></div>;
}

export default App;

  • g6的自定义边跟自定义节点是类似操作。
G6.registerEdge("hvh", {
    draw(cfg, group) {
        const startPoint = cfg!.startPoint!;
        const endPoint = cfg!.endPoint!;
        const startArrow = (cfg!.style && cfg!.style.startArrow) || undefined;
        const endArrow = (cfg!.style && cfg!.style.endArrow) || undefined;
        const shape = group!.addShape("path", {
            attrs: {
                stroke: "#333",
                path: [
                    ["M", startPoint.x, startPoint.y],
                    [
                        "L",
                        endPoint.x / 3 + (1 / 3) * startPoint.x,
                        endPoint.y / 2 + (1 / 3) * startPoint.y,
                    ],
                    [
                        "L",
                        endPoint.x * 1.1 + (2 / 3) * startPoint.x,
                        endPoint.y / 2 + (2 / 3) * startPoint.y,
                    ],

                    ["L", endPoint.x, endPoint.y],
                ],
                startArrow, //初始化配统一的箭头
                endArrow,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: "path-shape",
        });
        return shape;
    },
    setState(name, value, item) { //这个方法在3.3后可以不用,改为直接设置全局node/edge StateStyles
        const group = item!.getContainer();
        const shape = group.get("children")[0]; // 顺序根据 draw 时确定
        if (name === "active") {
            if (value) {
                //
                shape.attr("stroke", "red");
                shape.attr("lineWidth", 3);
            } else {
                shape.attr("stroke", "#333");
                shape.attr("lineWidth", 1);
            }
        }
        if (name === "selected") {
            if (value) {
                shape.attr("lineWidth", 3);
            } else {
                shape.attr("lineWidth", 1);
            }
        }
    },
});

  • 初始化可以统一配个箭头样式:
defaultEdge: {
    type: "line-arrow",
    style: {
        stroke: "#F6BD16",
        startArrow: {
            path: "M 0,0 L 12,6 L 9,0 L 12,-6 Z",
            fill: "#F6BD16",
        },
        endArrow: {
            path: "M 0,0 L 12,6 L 9,0 L 12,-6 Z",
            fill: "#F6BD16",
        },
    },
},

说明

  • g6里为了传递信息,设置了state,这个状态有全局设置或者单个设置。一般来说,统一用全局设置。这个主要用来判断点击了没有hover了没有之类。

  • 有点诡异的是好像相同行为触发的不同状态之间会冲突,所以最好是1个状态对应多值而不是多个状态对应二值。

  • 然后文档全篇在说怎么设置值,没说怎么获取值。。。。。。。后来发现item里写了个方法getState可以拿到state所有值,我也是服了。。state的概念里不写怎么获取,只写hasState是用来判断二值的。然后这个方法获取的值也很诡异,是个数组字符串,比如设置的值是active , ‘1’ ,那么数组里面值是:active:1的字符串。(这设计谁想出来的。。。不能做成key value?不能按key取值?实在不行按active:1字符串取值也行啊)

  • 比如上面那个例子就有冲突,监听那里改下:

graph.on("edge:click", (ev: IG6GraphEvent) => {
    const edge = ev.item;
    const value = edge!.getStates()[0];
    if (value !== "active:0") {
        if (value === "active:2") {
            graph.setItemState(edge!, "active", "0");
        } else {
            graph.setItemState(edge!, "active", "2"); // 切换选中
        }
    }
});

graph.on("edge:mouseenter", (ev: IG6GraphEvent) => {
    const edge = ev.item;
    const value = edge!.getStates()[0];
    if (value !== "active:2") {
        graph.setItemState(edge!, "active", "1");
    }
});

graph.on("edge:mouseleave", (ev: IG6GraphEvent) => {
    const edge = ev.item;
    const value = edge!.getStates()[0];
    if (value !== "active:2") {
        graph.setItemState(edge!, "active", "0");
    }
});

编辑器

对于编辑,我摸索了一番,实际就是要自己做个dom面板来进行编辑,我以右键弹出选框选择编辑label为例(实际应该点击后把input设置成显示,修改完毕搞个按钮然后点击保存。再关闭input)。我直接就input不操作显示与否了:

import React, { useEffect, useRef, useState } from "react";
import G6 from "@antv/g6";
import { NodeConfig, Item, IG6GraphEvent } from "@antv/g6/lib/types";
import GGroup from "@antv/g-canvas/lib/group";
import { IShape } from "@antv/g-canvas/lib/interfaces";
const data = {
    nodes: [
        {
            id: "Model",
            type: "model-node", //这个就是注册的
            x: 200,
            y: 100,
            style: {
                width: 160,
                height: 100,
                fill: "#f1b953",
                stroke: "#f1b953",
            },
            openIcon: {
                x: 180, // 控制图标在横轴上的位置
                y: 45, // 控制图标在纵轴上的位置
                fontSize: 20,
                style: {
                        fill: "#fc0",
                },
            },
            hideIcon: {
                x: 180, // 控制图标在横轴上的位置
                y: 45, // 控制图标在纵轴上的位置
                fontSize: 20,
                style: {
                    fill: "#666",
                },
            },
            labels: [
                {
                    x: 10,
                    y: 20,
                    label: "标题,最长10个字符~~",
                    labelCfg: {
                        fill: "#666",
                        fontSize: 14,
                        maxlength: 10,
                    },
                },
                {
                    x: 10,
                    y: 40,
                    label: "描述,最长12个字333符~~~",
                    labelCfg: {
                        fontSize: 12,
                        fill: "#999",
                        maxlength: 12,
                    },
                },
            ],
            anchorPoints: [
                //这属性用来设定边的连接中心
                [0, 0.5],
                [0, 1],
            ],
        },
        {
            id: "node1", // String,该节点存在则必须,节点的唯一标识
            label: "node1",
            x: 10, // Number,可选,节点位置的 x 值
            y: 200, // Number,可选,节点位置的 y 值
            size: 50,
            anchorPoints: [
                //这属性用来设定边的连接中心
                [1, 0.5],
                [1, 0.8],
            ],
        },
        {
            id: "node2", // String,该节点存在则必须,节点的唯一标识
            label: "node2",
            size: 50,
            x: 70, // Number,可选,节点位置的 x 值
            y: 20, // Number,可选,节点位置的 y 值
            anchorPoints: [
                //这属性用来设定边的连接中心
                [1, 0.5],
                [0, 0.5],
                [0.5, 1],
            ],
        },
    ],
    edges: [
        {
            id: "edge1",
            target: "Model",
            source: "node1",
            type: "hvh",
            // 该边连入 source 点的第 0 个 anchorPoint,
            sourceAnchor: 1,
            // 该边连入 target 点的第1个 anchorPoint,
            targetAnchor: 1,
        },
        {
            id: "edge2",
            target: "node2",
            source: "node1",
            type: "hvh",
        },
        {
            id: "edge3",
            target: "node2",
            source: "Model",
            type: "hvh",
            targetAnchor: 2,
        },
    ],
};

interface modelNodeType extends NodeConfig {
    openIcon: {
        x: number;
        y: number;
        fontSize: number;
        style: Object;
    };
    hideIcon: {
        x: number;
        y: number;
        fontSize: number;
        style: Object;
    };
    labels: Array<any>;
}

function shapesAddAttr(shape: Array<any>, key: string, value: any) {
    shape.forEach((v) => v.attr(key, value));
}

G6.registerEdge("hvh", {
    draw(cfg, group) {
        const startPoint = cfg!.startPoint!;
        const endPoint = cfg!.endPoint!;
        const startArrow = (cfg!.style && cfg!.style.startArrow) || undefined;
        const endArrow = (cfg!.style && cfg!.style.endArrow) || undefined;
        const shape = group!.addShape("path", {
            attrs: {
                stroke: "#333",
                path: [
                        ["M", startPoint.x, startPoint.y],
                        [
                                "L",
                                endPoint.x / 3 + (1 / 3) * startPoint.x,
                                endPoint.y / 2 + (1 / 3) * startPoint.y,
                        ],
                        [
                                "L",
                                endPoint.x * 1.1 + (2 / 3) * startPoint.x,
                                endPoint.y / 2 + (2 / 3) * startPoint.y,
                        ],

                        ["L", endPoint.x, endPoint.y],
                ],
                startArrow, //初始化配统一的箭头
                endArrow,
            },
            // must be assigned in G6 3.3 and later versions. it can be any value you want
            name: "path-shape",
        });
        return shape;
    },
    setState(name, value, item) {
        //这个方法在3.3后可以不用,改为直接设置全局node/edge StateStyles
        const group = item!.getContainer();
        const shape = group.get("children"); // 顺序根据 draw 时确定
        if (name === "active") {
            switch (value) {
                case "0":
                    shapesAddAttr(shape, "stroke", "#333");
                    shapesAddAttr(shape, "lineWidth", 1);
                    break;
                case "1":
                    shapesAddAttr(shape, "stroke", "red");
                    shapesAddAttr(shape, "lineWidth", 3);
                    break;
                case "2":
                    shapesAddAttr(shape, "stroke", "blue");
                    shapesAddAttr(shape, "lineWidth", 3);
                    break;
                default:
                    return;
            }
        }
    },
});

// 注册自定义节点
G6.registerNode(
    "model-node",
    {
        drawShape(cfg: modelNodeType, group) {
            const opts = cfg;
            const openIcon = opts.openIcon;
            const hideIcon = opts.hideIcon;
            // 添加节点
            const shape = group!.addShape("rect", {
                    name: "model-node",
                    draggable: true, // 让自定义节点支持拖拽
                    attrs: cfg.style,
            });

            const openSwitch = group!.addShape("circle", {
                    draggable: true,
                    attrs: {
                            r: 10,
                            ...openIcon,
                            ...openIcon.style,
                    },
                    className: "state-open",
            });

            const hideSwitch = group!.addShape("circle", {
                    draggable: true,
                    attrs: {
                            r: 10,
                            ...hideIcon,
                            ...hideIcon.style,
                    },
                    className: "state-hide",
            });

            // 添加多行文本
            for (let i = 0; i < cfg.labels.length; i++) {
                const item = cfg.labels[i];
                const {
                    label,
                    labelCfg: { maxlength },
                } = item;

                let text = maxlength ? label.substr(0, maxlength) : label || "";

                if (label.length > maxlength) {
                    text = `${text}...`;
                }

                group!.addShape("text", {
                    attrs: {
                        text,
                        ...item,
                        ...item.labelCfg,
                    },
                });
            }
            this.bindEvent(group, openSwitch);
            this.bindEvent(group, hideSwitch);

            return shape;
        },
        bindEvent(group: GGroup, btn: IShape) {
            //ggroup就是graphics group缩写
            btn.on("click", () => {
                const open = group
                    .get("children")
                    .find((child: any) => child.cfg.className === "state-open");
                const close = group
                    .get("children")
                    .find((child: any) => child.cfg.className === "state-hide");
                if (btn.cfg.className === "state-open") {
                    const item = group.get("item"); //在这个图形分组下的item
                    const model = item.getModel();
                    open.toBack();
                    close.toFront(); //这个是让2个圆z轴位置变化 item上的方法
                    model.style.height = 100;
                    item.update(model);
                } else if (btn.cfg.className === "state-hide") {
                    const item = group.get("item");
                    const model = item.getModel();
                    close.toBack(); //Item 上的方法
                    open.toFront(); //item上的方法
                    model.style.height = 50;
                    item.update(model); //item上的方法
                }
            });
        },
    },
    "single-node"
); // 继承自内置节点

function App() {
    const ref = useRef<HTMLDivElement>(null);
    const [state, setState] = useState("");
    const [changeItem, setChangeItem] = useState<Item>();
    useEffect(() => {
        const contextMenu = new G6.Menu({
            getContent(graph) {
                console.log("graph", graph);
                return `<div>编辑lable</div>`;
            },
            handleMenuClick: (target, item) => {
                //target是dom item 是Item
                //只有click了才知道是哪个节点触发的
                const model = item.getModel();
                const value = model.label;
                if (typeof value === "string") {
                    //将节点的值赋给input并绑上onchange给它
                    setState(value);
                    setChangeItem(item); //要调用更新,最小是item item才有update
                }
            },
        });
        const graph = new G6.Graph({
            container: ref.current!,
            width: 800,
            height: 800,
            // renderer: 'svg',
            fitCenter: true,
            modes: {
                default: ["drag-canvas", "zoom-canvas", "drag-node"],
                //edit: ["click-select", "click-add-node"],
            },
            defaultEdge: {
                type: "line-arrow",
                style: {
                    stroke: "#F6BD16",
                    startArrow: {
                        path: "M 0,0 L 12,6 L 9,0 L 12,-6 Z",
                        fill: "#F6BD16",
                    },
                    endArrow: {
                        path: "M 0,0 L 12,6 L 9,0 L 12,-6 Z",
                        fill: "#F6BD16",
                    },
                },
            },
            plugins: [contextMenu],
        });

        // graph.on("node:click", (ev: any) => {
        // 	console.log(ev);
        // 	graph.setMode("edit");
        // });

        graph.on("edge:click", (ev: IG6GraphEvent) => {
            const edge = ev.item;
            const value = edge!.getStates()[0];
            if (value !== "active:0") {
                if (value === "active:2") {
                    graph.setItemState(edge!, "active", "0");
                } else {
                    graph.setItemState(edge!, "active", "2"); // 切换选中
                }
            }
        });

        graph.on("edge:mouseenter", (ev: IG6GraphEvent) => {
            const edge = ev.item;
            const value = edge!.getStates()[0];
            if (value !== "active:2") {
                graph.setItemState(edge!, "active", "1");
            }
        });

        graph.on("edge:mouseleave", (ev: IG6GraphEvent) => {
            const edge = ev.item;
            const value = edge!.getStates()[0];
            if (value !== "active:2") {
                graph.setItemState(edge!, "active", "0");
            }
        });

		
        // 传入数据
        graph.data(data);
        // 执行渲染
        graph.render();
        // graph.fitView();
    }, []);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        setState(e.target.value);
        //修改state后改变节点Label
        if (changeItem) {//其他样式控制同理这么操作
            const model = changeItem.getModel();
            model.label = e.target.value;
            changeItem.update(model);
        }
    };

    return (
        <div>
            <div id="editor">
                <span>修改label :</span>
                <input  value={state} onChange={handleChange}></input>
            </div>
            <div ref={ref} id="container"></div>
        </div>
    );
}

export default App;

最后需要注意下自定义节点的格式,如果像我这么写自定义节点,那么label很可能就不对或者没有,所以事先需要规划好到底哪些属性应该去配置,哪些属性可以配置。

 类似资料: