antvis/G6

[Bug]: Custom nodes cannot be dragged and dropped #6690

uioonm posted onGitHub

Describe the bug / 问题描述

使用文档的自定义节点,节点无法拖拽 以下代码复制到图表示例内可以复现

import { ExtensionCategory, Graph, register } from '@antv/g6';
import { CustomElement, Circle } from '@antv/g';

class CustomCircle extends CustomElement {
  constructor(options) {
    super(options);
    this.render();
  }

  render() {
    const { radius } = this.attributes;
    const circle = new Circle({
      style: {
        ...this.attributes,
        x: 0,
        y: 0,
        r: radius,
      },
    });
    this.appendChild(circle);
  }
}
register(ExtensionCategory.NODE, 'custom-circle', CustomCircle);

const graph = new Graph({
  container: 'container',
  data: {
    nodes: [
      {
        type: 'custom-circle',
        id: 'node-1',
        style: { x: 100, y: 100, radius: 25 },
      },
      {
        type: 'custom-circle',
        id: 'node-2',
        data: { name: 'Process', type: 'process', status: 'error', success: 11, time: 12, failure: 26 },
        style: { x: 300, y: 100, radius: 25 },
      },
    ],
    edges: [{ source: 'node-1', target: 'node-2' }],
  },
  behaviors: ['drag-element', 'zoom-canvas', 'drag-canvas'],
});

graph.render();

No response

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

No response

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

posted by yvonneyx 4 months ago

你是参考了哪里实现这段代码的?

建议参考: 自定义节点:https://g6.antv.antgroup.com/manual/custom-extension/element#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%8A%82%E7%82%B9 场景示例:https://g6.antv.antgroup.com/zh/examples/scene-case/default/#fund-flow

1735869169610 额就是参考的这个文档内的原代码,且测试了文档内其他形式的自定义元素都无法进行拖拽(应该是热更新问题,刷新页面后就正常了)。 不过我按照场景示例的自定义元素解决了这个问题,非常感谢。

posted by uioonm 4 months ago

Fund this Issue

$0.00
Funded

Pull requests