Method not implemented. 报错。

[anyone0034]

Describe the bug / 问题描述

我是直接复制的官方demo，没有做任何修改。

Uncaught runtime errors:
×
ERROR
Method not implemented.
    at Camera.createLandmark (http://localhost:7004/js/e216158b.js:2281:15)
    at ViewportController.createLandmark (http://localhost:7004/js/vendors-node_modules_antv_g-camera-api_node_modules_antv_g-math_dist_index_esm_js-node_module-d028d5.js:38639:28)
    at ViewportController.transform (http://localhost:7004/js/vendors-node_modules_antv_g-camera-api_node_modules_antv_g-math_dist_index_esm_js-node_module-d028d5.js:38780:43)
    at new ViewportController (http://localhost:7004/js/vendors-node_modules_antv_g-camera-api_node_modules_antv_g-math_dist_index_esm_js-node_module-d028d5.js:38863:14)
    at Graph.initRuntime (http://localhost:7004/js/vendors-node_modules_antv_g-camera-api_node_modules_antv_g-math_dist_index_esm_js-node_module-d028d5.js:37416:61)
    at Graph.prepare (http://localhost:7004/js/vendors-node_modules_antv_g-camera-api_node_modules_antv_g-math_dist_index_esm_js-node_module-d028d5.js:37429:14)
    at async Graph.render (http://localhost:7004/js/vendors-node_modules_antv_g-camera-api_node_modules_antv_g-math_dist_index_esm_js-node_module-d028d5.js:37445:9)

以下是代码示例：

import { Graph } from '@antv/g6';
import { useEffect, useRef } from 'react';

export default () => {
    const containerRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const graph = new Graph({
            container: containerRef.current!,
            width: 500,
            height: 500,
            data: {
                nodes: [
                    {
                        id: 'node-1',
                        style: { x: 50, y: 100 },
                    },
                    {
                        id: 'node-2',
                        style: { x: 150, y: 100 },
                    },
                ],
                edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
            },
        });

        graph.render();
    }, []);



    return <div ref={containerRef} />;


};

Reproduction link / 重现链接

No response

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

Method not implemented. 报错。不太稳定，我也不知道是什么问题。我使用的是"@antv/g6": "^5.0.9",这个版本，一会报错Graph找不到，一会报错graph.data方法不存在……麻烦能不能给一个稳定的demo.

G6 Version / G6 版本

🆕 "@antv/g6": "^5.0.9",

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

No response

[anyone0034]

[anyone0034]

[Aarebecca]

1. 建议提供完整代码
2. 检查 G6 引入方式
3. Graph 不存在 data 方法，API 见：https://g6-next.antv.antgroup.com/api/graph/method

[ChenLeoXX]

1. 建议提供完整代码
2. 检查 G6 引入方式
3. Graph 不存在 data 方法，API 见：https://g6-next.antv.antgroup.com/api/graph/method

同样存在该问题，目前看出来是@antv/g6-extension-react的问题，安装了之后渲染会报Error: Method not implemented，createLandmark这个方法，表现为canvas无法拖动放大，无法居中，操作的话会就报Error: Method not implemented，卸载后渲染没有问题

[Aarebecca]

不排除是否是因为在 React 环境使用的原因，在 React 严格模式下需要小心处理和 G6 的执行时序，为了避免这一问题，推荐在 React 环境下使用 @antv/graphin，该框架是基于 G6 的 React 封装，你仍然可以使用 @antv/g6-extension-react 中的内容。

[zackyoungh]

我也碰到此问题，但是排查下来，是引入多依赖，造成版本问题，需要手动指定下g-canvas的版本，如添加 "@antv/g-canvas": "^2.0.20",即可

[ldc2726]

我也遇到了这个问题什么都还没写呢，

"@antv/data-set": "^0.11.8", "@antv/g": "^6.1.21", "@antv/g6": "^5.0.42", "@antv/graphin": "^3.0.4", "@antv/l7": "^2.21.8", "@antv/l7-district": "^2.3.12", "@antv/larkmap": "^1.4.16",