layout is not a function

[resetsix]

Describe the bug

antv/x6是基于 antv/layout 包实现的布局算法，我按照官网教程尝试使用antv/layout包中的 dagre布局，但是在实例化布局的时候遇到两个问题。

1、提示type等参数不在DagreLayout配置中，我跳转到 ts 源码类型提示发现确实没有 type 相关的类型只有图二中nodeSize和GraphLabel, NodeConfig, EdgeConfig父类型，可是无法跳转了。不知道官网文档示例是否已过时。

new DagreLayout({
  type: "dagre",
  rankdir: "LR", // 水平方向布局
  align: "UL",
  ranksep: 80, // 节点间距
  nodesep: 100, // 层间距
})

2、new XXXLayout()实例化对象已经没有layout方法了，不知道官网文档示例是否已过时。只有如下类型提示

id: string;
options: Partial<DagreLayoutOptions>;
execute(graph: Graph, options?: DagreLayoutOptions): Promise<LayoutMapping>;
assign(graph: Graph, options?: DagreLayoutOptions): Promise<void>;

即使我使用execute和assign方法替代layout，但是传递的data数据提示execute和assign的类型传不符。

data 数据

const data = {
  nodes: [
    {
      id: "start",
      shape: "circle",
      x: 100,
      y: 60,
      width: 80,
      height: 80,
      label: "开始",
      attrs: {
        body: {
          fill: "#5F95FF",
          stroke: "#5F95FF",
        },
        label: {
          fill: "#ffffff",
        },
      },
    },
    {
      id: "process",
      shape: "rect",
      x: 300,
      y: 80,
      width: 120,
      height: 40,
      label: "处理",
      attrs: {
        body: {
          fill: "#FFB366",
          stroke: "#FFB366",
        },
      },
    },
    {
      id: "end",
      shape: "circle",
      x: 500,
      y: 60,
      width: 80,
      height: 80,
      label: "结束",
      attrs: {
        body: {
          fill: "#FF6666",
          stroke: "#FF6666",
        },
        label: {
          fill: "#ffffff",
        },
      },
    },
  ],
  edges: [
    {
      source: "start",
      target: "process",
      label: "开始处理",
      attrs: {
        line: {
          stroke: "#5F95FF",
          strokeWidth: 2,
        },
      },
    },
    {
      source: "process",
      target: "end",
      label: "处理完成",
      attrs: {
        line: {
          stroke: "#5F95FF",
          strokeWidth: 2,
        },
      },
    },
  ],
};

我不知道该如何在 antv/x6 中使用drage布局算法。

Your Example Website or App

https://codesandbox.io/p/sandbox/2xxwj5?file=%2Fsrc%2FApp.tsx

Steps to Reproduce the Bug or Issue

1. 导入 import { DagreLayout } from "@antv/layout";
2. 实例化对象

const layout = new DagreLayout({
  type: "dagre",
  rankdir: "TB", // 可以是 "TB", "BT", "LR", 或 "RL"
  align: "UL",
  ranksep: 70, // 节点间距
  nodesep: 70, // 层间距
});

3. 应用布局

Expected behavior

antv/x6正常使用dagre布局

Screenshots or Videos

No response

Platform

• OS: [macOS]
• Browser: [Chrome最新, Firefox最新]
• Version: [2.18.1]

Additional context

No response

[x6-bot]

👋 @resetsix

Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you include steps to reproduce it.
To help make it easier for us to investigate your issue, please follow the contributing guidelines.
We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[6653302wy]

我也碰到和楼主一样的问题了，官方文档是过时了吗？

[resetsix]

我也碰到和楼主一样的问题了，官方文档是过时了吗？

应该是文档没及时更新吧，有些 api 还停留在 v1

[Ardanas]

直接看源码的demo

demo

[lzhelin]

即使用execute，仍然报错：
Uncaught (in promise) TypeError: graph.getAllNodes is not a function

[lucifer-yf]

https://github.com/antvis/X6/blob/master/sites/x6-sites/package.json

@resetsix 看官方示例代码，需要 安装 这几个 版本 才可以运行 亲测可行

[Wyt-GitHub8000]

最新版本的的布局库和x6库，报楼主相同问题，看了源码需要使用 execute方法，使用后又报 graph.getAllNodes is not a function，原因是 execute传入的不能是x6导出的new Graph实例对象，需要传入这个库导出的Graph实例对象 import { Graph as GraphLib } from "@antv/graphlib"

版本：
"@antv/layout": "1.2.14-beta.8",
"@antv/x6": "2.18.1",
核心代码：
const cirGraph = new GraphLib({ nodes, edges: [] })
circularLayout.execute(cirGraph).then((positions) => {
console.log(positions)
updatePosition(positions)
})

[free-lxc]

查看源码，每个layout的版本里的api都不一样，初始化主要在init，layout，excute这三个；对于不同的布局；返回的结果也不一定相同

[maple5233]

最新版本的的布局库和x6库，报楼主相同问题，看了源码需要使用 execute方法，使用后又报 graph.getAllNodes is not a function，原因是 execute传入的不能是x6导出的new Graph实例对象，需要传入这个库导出的Graph实例对象 import { Graph as GraphLib } from "@antv/graphlib"

版本： "@antv/layout": "1.2.14-beta.8", "@antv/x6": "2.18.1", 核心代码： const cirGraph = new GraphLib({ nodes, edges: [] }) circularLayout.execute(cirGraph).then((positions) => { console.log(positions) updatePosition(positions) })

请教一下，如过已经用了 import { Graph } from '@antv/x6'
这俩能互转吗？

[Dntts]

me too

[TinyD0409]

我也遇到了，还没官方解决吗o(╥﹏╥)o