Polylines do not take effect in custom layouts #6572

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