[Bug]: 官方提供的3d布局,为什么只能坍缩在一个2D平面上,我尝试设置了多个参数,都无法让图形展开到3D空间:
- 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图片演示效果:
实际官方实例的运行效果:
官方的示例代码(尝试过改变多个参数,所有的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