antvis / antvis/G6

[Bug]: 3D布局无法触发点击事件

Open
#7,412 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

feature 💡
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

Describe the bug / 问题描述

用的官网的例子:

Image
import { CameraSetting, ExtensionCategory, Graph, register } from '@antv/g6';
import { D3Force3DLayout, Light, Line3D, ObserveCanvas3D, Sphere, ZoomCanvas3D, renderer } from '@antv/g6-extension-3d';

register(ExtensionCategory.PLUGIN, '3d-light', Light);
register(ExtensionCategory.NODE, 'sphere', Sphere);
register(ExtensionCategory.EDGE, 'line3d', Line3D);
register(ExtensionCategory.LAYOUT, 'd3-force-3d', D3Force3DLayout);
register(ExtensionCategory.PLUGIN, 'camera-setting', CameraSetting);
register(ExtensionCategory.BEHAVIOR, 'zoom-canvas-3d', ZoomCanvas3D);
register(ExtensionCategory.BEHAVIOR, 'observe-canvas-3d', ObserveCanvas3D);

fetch('https://assets.antv.antgroup.com/g6/d3-force-3d.json')
  .then((res) => res.json())
  .then((data) => {
    const graph = new Graph({
      container: 'container',
      renderer,
      data,
      layout: {
        type: 'd3-force-3d',
      },
      node: {
        type: 'sphere',
        style: {
          materialType: 'phong',
        },
        palette: {
          color: 'tableau',
          type: 'group',
          field: 'group',
        },
      },
      edge: {
        type: 'line3d',
      },
      behaviors: ['observe-canvas-3d', 'zoom-canvas-3d'],
      plugins: [
        {
          type: '3d-light',
          directional: {
            direction: [0, 0, 1],
          },
        },
      ],
    });
    graph.on("node:click", (evt) => {
    console.log('点击事件不生效')
    });
    graph.render();
  });

Reproduction link / 复现链接

https://g6.antv.antgroup.com/examples/layout/force-directed/#3d-force

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

将代码粘贴至https://g6.antv.antgroup.com/examples/layout/force-directed/#3d-force

Version / 版本

🆕 5.x

OS / 操作系统
  • macOS
  • Windows
  • Linux
  • Others / 其他
Browser / 浏览器
  • Chrome
  • Edge
  • Firefox
  • Safari (Limited support / 有限支持)
  • IE (Nonsupport / 不支持)
  • Others / 其他

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked 3D force-directed reproduction and run the provided snippet in Chrome. Trace the node:click event path for the 3D renderer and verify whether the callback fires; done means clicking a 3D node invokes the registered handler.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.