Method not implemented. 报错。

anyone0034 commented 1 month ago

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 commented 1 month ago

6ea16dc99709fbbea002360b85a1ffa

anyone0034 commented 1 month ago

c9c7421ff54376ad48c8a10eecbdaa5

Aarebecca commented 1 month ago

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

ChenLeoXX commented 1 month ago

建议提供完整代码

检查 G6 引入方式

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 commented 2 weeks ago

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

antvis / G6