antvis / antvis/G6

[Bug]: 官方提供的3d布局,为什么只能坍缩在一个2D平面上,我尝试设置了多个参数,都无法让图形展开到3D空间:

Open
#7,495 2 comments 0 reactions 0 assignees View on GitHub
bug 🐛 question 💬
Dominant language
TypeScript
Stars
12.3k
Forks
1.6k
PR merge metrics
No merged PRs in 30d

Description

### Describe the bug / 问题描述

官方链接地址:
https://g6.antv.antgroup.com/examples/layout/force-directed/#3d-force

官方的GIF图片演示效果:
Image

实际官方实例的运行效果:
Image

官方的示例代码(尝试过改变多个参数,所有的Node还是在一个平面上):
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.render();
});

### Reproduction link / 复现链接

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

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

1、直接将URL输入浏览器运行网页,
2、观察画布呈现的布局,所有Node坍缩在一个平面上。

### Version / 版本

🆕 5.x

### OS / 操作系统

- [ ] macOS
- [x] Windows
- [ ] Linux
- [ ] Others / 其他

### Browser / 浏览器

- [x] Chrome
- [ ] Edge
- [ ] Firefox
- [ ] Safari (Limited support / 有限支持)
- [ ] IE (Nonsupport / 不支持)
- [ ] Others / 其他

Contributor guide

No contributing guide indexed for this repository

Research direction

Run the linked 3d-force example with the supplied configuration, then inspect the D3Force3DLayout registration and the 3D extensions named in the snippet. Compare the node positions with the linked GIF; done means the example visibly distributes nodes through 3D space instead of a single plane.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
data-visualization
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.