【V5】新手贴：关于 G6 踩过的一些小坑

[resetsix]

Learning antv/g6 encountered problems

version update

• antv/g6 v5.0.21

• antv/g6 v5.0.20

• antv/g6 v5.0.19

Q&A

Q1:antv/g6 源码映射指向不存在路径

相关issue：#4546 (comment)

在项目启动编译时提示 warning 信息，不影响项目正常运行

点击展开/关闭

解决方案：关闭构建工具生成源码映射文件开关

根目录新增.env文件，内容如下

GENERATE_SOURCEMAP=false

---

Q2:手动配置色板颜色不生效

色板作用：当 node 数量庞大时，更方便的为 node 配置颜色。

palette会根据{nodes:[id:xxx,data:{customField:xxx}]}中的customField不同值来区分有几种颜色。

假设customField: i % 2 === 0 ? "value1" : "value2"，会返回两个不同的值，那么就会从自定义的 color 数组中取出两种颜色（返回什么不重要，只看有几种value。）

如果数组只有一个颜色，那么所有 node 都是相同的颜色；如果不配置color 数组或为空，则默认使用palette内置颜色。

内置颜色有：export type BuiltInPalette = 'spectral' | 'oranges' | 'greens' | 'blues';

const graph = new Graph({
    container: "#ID",
    width: number,
    height: number,
    data,
    node: {
      palette: {
        field: "color",
        // right
        color: ["red", "green", "blue"],

        // error
        // color: 'red'
      },
    },
});

解决方案：color属性传递数组

---

Q3:grid-line 插件不生效

{
  plugins: ['grid-line'],
}

点击展开/关闭

增加以上配置仅仅只增加上图中的横线。预期应该如下

点击展开/关闭

初步判断是使用autoResize: true而没有指定height影响，但关闭自动画布且配置height仍没有效果。

实际原因：容器<div ref={containerRef} />本身没有设置高度，Graph 可能无法正确计算出合适的大小。如果要启用grid-line画布插件，需要给父元素 div 设置宽高，在graph 配置中是无效的。

解决方案：给父容器设置宽高

Q4:关于状态样式使用

G6 预设的状态包括：

• selected：选中状态
• active：激活状态
• highlight：高亮状态
• inactive：非激活状态
• disable：禁用状态

G6 中的状态类型是一个字符串数组(string[])，即一个元素可以同时存在多个状态，例如一个节点可以同时处于选中和悬停状态。

可以在data中预设 node 的状态。
可以在样式映射中配置状态有哪些样式。

---

Q5:无法使用树图布局

v5合并了图和树图，但是无法使用树图布局。

在layout下的 type 类型声明中也没有树图相关的值。

点击展开/关闭

解决方案：从源码跳转到的 Layout TS 类型声明布局名不准确（官方解释说只是用来做内部识别用的），所有内置布局参考

G6/packages/g6/src/registry/build-in.ts

Line 188 in b49ce81

plugin: {

plugin: {
    'bubble-sets': BubbleSets,
    'edge-filter-lens': EdgeFilterLens,
    'grid-line': GridLine,
    background: Background,
    contextmenu: Contextmenu,
    fisheye: Fisheye,
    fullscreen: Fullscreen,
    history: History,
    hull: Hull,
    legend: Legend,
    minimap: Minimap,
    snapline: Snapline,
    timebar: Timebar,
    toolbar: Toolbar,
    tooltip: Tooltip,
    watermark: Watermark,
},

---

Q6:tooltip插件启用 enable 后自动移除失效

假设需求：hover或click时只让node有提示，edge没有提示。

const graph = new Graph({
  container: xxx,
  plugins: [
    {
      type: "tooltip",
      key: "tooltip",
      enable: (event: IElementEvent) => {
        return event.targetType === "node" || event.targetType === "edge";
      },
    },
  ],
});

解决方案：官方已修复#6270

---

Q7:三次贝塞尔曲线-水平（edge）没有连接在 node 的边缘中心

点击展开/关闭

修复后效果

点击展开/关闭

解决方案：在 node 的样式对象中添加如下配置

过时方案：

点击展开/关闭

const graph = new Graph({
  container: containerRef.current!,
  node: {
    // ...other
    style: {
      // add these two config 
      port: true,
      ports: [{ placement: "right" }, { placement: "left" }],
    },
  },
})

以上方案还是会有偏差。

最新方案：应该使用portLinkToCenter: true。详情

---

Q8:无法根据 label 内容长度动态设置 node 宽度

官方回应

目前 G6 5.0 还没提供这项能力，只能先自定义节点然后自适应。我后面评估下 G6 是否需要支持设置如 size: 'auto' 这种方式来自适应

最初解决方法（不是很完美，只能针对 label 是纯中文的情况）

node: {
  style: {
    size(d: any) {
      const width = d.data.label.length * 14 + 30; 
      const height = 30;
      return [width, height];
    },
  },
},

width = label 字数 * 14 + 30

解释：14 px是全局的 fontSize 大小，30 px是给 icon 和 padding 站位的空间，30这个值是页面直观看上去刚好比较合适的。

目前最新可行的解决方案：计算文本在浏览器中的实际渲染宽度

// utils.ts
export const getTextWidth = (
    text: string,
    font = "14px sans-serif"
): number => {
    const canvas = document.createElement("canvas");
    const context = canvas.getContext("2d");
    if (context) {
        context.font = font;
        return context.measureText(text).width;
    }
    return 0;
};

size(d: any) {
  const labelWidth = getTextWidth(
    d.id,
    "14px sans-serif"
  );
  const width = labelWidth + 40; // 40px 用于图标和内边距
  const height = 30;
  return [width, height];
},

Q9:自定义节点的 edge 总是连接在 node 内部而不是边缘

效果图

width: "100%" 或 midWidth: "100%" 会导致 edge 连接在 node 内部而不是边缘

移除width: "100%" 或 midWidth:'100%'后效果

const DtNode: React.FC<DeNodeProps> = ({ data }) => {
    return (
        <Flex
            align="center"
            gap="small"
            style={{
                // 使用 100% 会导致 edge 连接在 node 内部而不是边缘
                // width: "100%",
                height: "100%",
                paddingInlineStart: 6,
                color: "gray",
                borderRadius: 6,
                border: `1px solid ${data.data.color || "#9CA1B9"}`,
            }}
        >
            <LibraryFolder />
            <Typography.Text>{data.id}</Typography.Text>
        </Flex>
    );
};

分析：最开始以为是自定义节点padding导致的，但移除后仍然有这个问题。经过反复调试，发现是width: "100%" 或 midWidth:'100%'导致的。

解决方案：移除掉width: "100%" 或 midWidth:'100%'。

Q10: edge 没有 id 会有什么影响？（已知如果使用 edge，那么 node 是必需要有 id 的）。

A10：如果 edge 没有 id 那么G6会自动给 edge 生成默认 id，id 值是源 node 和目标 node 的拼接 id，如sourceId_targetId

但是要注意：**只有当 id 为 undefined 或 id字段不存在 时，才会默认使用 node 的 id 作为默认值。

可能有些后端会给前端返回 edge id，但是因为后端没有 undefined 类型，而 null、""、0 是不会触发默认 id 计算，所以要格外注意。

参考

• Antv-G6学习笔记-v4
• Antv官网-v5
• Antv源码-build-in

[Aarebecca]

欢迎给 G6 提PR，你可以将这些问题提交到 https://github.com/antvis/G6/blob/v5/packages/site/docs/manual/faq.zh.md ，这样我们会在下次更新站点时将这些内容在官网 https://g6-next.antv.antgroup.com/manual/faq 展示出来

[resetsix]

欢迎给 G6 提PR，你可以将这些问题提交到 https://github.com/antvis/G6/blob/v5/packages/site/docs/manual/faq.zh.md ，这样我们会在下次更新站点时将这些内容在官网 https://g6-next.antv.antgroup.com/manual/faq 展示出来

好的，我后面再重新梳理一下。