Polylines do not take effect in custom layouts

[1823616178]

Describe the bug / 问题描述

let data = {
nodes: [
{id: '0', level: 1},
{id: '1', level: 1},
{id: '2', level: 1},
{id: '3', level: 2},
{id: '4', level: 2},
{id: '5', level: 2},
{id: '6', level: 3},
{id: '7', level: 3},
{id: '8', level: 3},
{id: '9', level: 3},
],
edges: [
{source: '0', target: '1'},
{source: '0', target: '2'},
{source: '1', target: '4'},
{source: '0', target: '3'},
{source: '3', target: '4'},
{source: '4', target: '5'},
{source: '4', target: '6'},
{source: '5', target: '7'},
{source: '5', target: '8'},
{source: '8', target: '9'},
{source: '2', target: '9'},
{source: '3', target: '9'},
],
};
const InitG6 = async () => {
let width = mountRelation.value?.scrollWidth;
let height = mountRelation.value?.scrollHeight;
graph = new Graph({
container: "mountRelation",
width: width,
height: height,
theme: "light",
autoResize: true,
autoFit: true,
animation: true,
cursor: "pointer",
layout: {
type: 'inherit-relation',
nodeSize: 20,
controlPoints: true,
},
node: {
style: {
badge: true,
size: 60,
}
},
edge: {
type: 'polyline',
style: {
endArrow: true,
radius: 4,
},
},
})
graph.setData(data)
await graph.render();
}

自定义布局

import {BaseLayout, DagreLayout} from '@antv/g6'

export class inheritRelationLayout extends BaseLayout {
id = "inherit-relation"
tickCount = 0
resolve = undefined
promise = undefined
timer = undefined

findMostFrequent(arr) {
    const frequencyMap = {}; // 创建一个对象来存储每个元素的频率
    let maxCount = 0; // 初始化最大计数为0
    let mostFrequent;

    // 遍历数组，统计每个元素的出现次数
    for (const num of arr) {
        if (!frequencyMap[num]) {
            frequencyMap[num] = 0;
        }
        frequencyMap[num]++;

        // 如果当前元素的频率大于已知的最大频率，则更新maxCount和mostFrequent
        if (frequencyMap[num] > maxCount) {
            maxCount = frequencyMap[num];
            mostFrequent = num;
        }
    }

    return mostFrequent;
}

async execute(data, options) {
    console.log(this.options)
    const {onTick} = {...this.options, ...options}
    this.tockCount = 0
    this.data = data
    /*  this.promise = new Promise((resolve) => {
          this.resolve = resolve;
      });
      this.timer = window.setInterval(() => {
          onTick(this.layoutRelationMap(data, this.options));
          if (this.tickCount === 10) this.stop();
      }, 200);
      await this.promise;*/

    return this.layoutRelationMap(data, this.options);
};

layoutRelationMap = (data, options) => {
    console.log("data", data)
    console.log("options", options)
    let countArr = []
    let levelMap = data?.nodes?.map(res => res?.level)
    let occurrences = this.findMostFrequent(levelMap)
    let repeatMaxNum = levelMap.filter(res => res === occurrences)?.length
    let startY = options?.center[1]
    return {
        nodes: (this?.data?.nodes || []).map((node, index) => {
            let nodes = {
                id: node.id,
                style: {
                    x: (options.center[0] - repeatMaxNum * 100 / 2) + ((countArr.filter(e => e === node?.level)?.length) || 0) * 150,
                    y: (node?.level - 2) * 150 + startY,
                    id: node?.id
                },
            }
            countArr.push(node?.level)
            return nodes
        }),
    };
}

simulateTick = () => {
    const x = this.tickCount++ % 2 === 0 ? 50 : 150;
    return {
        nodes: (this?.data?.nodes || []).map((node, index) => ({
            id: node.id,
            style: {x, y: (index + 1) * 100},
        })),
    };
};

tick = () => {
    return this.simulateTick();
};

stop = () => {
    clearInterval(this.timer);
    this.resolve?.();
};

}

Reproduction link / 重现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

我将edge的类型设置为折线后，界面上依然显示直线

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

[github-actions]

This issue has been marked as Bad. Please provide more information, or use the standard format, otherwise it will be closed soon.
Reference document:

• Creating an issue
• Basic writing and formatting syntax

---

这个 issue 已经被标记为 Bad。请提供更多信息，或者使用规范的格式，否则将在近期关闭。
参考文档：

• 创建议题
• 基本撰写和格式语法