-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
8 changed files
with
195 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,78 @@ | ||
| ## 3D extension for G6 | ||
|
|
||
| <img width="300" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*lEL3TrCLnPsAAAAAAAAAAAAADmJ7AQ/original" /> | ||
| <img width="300" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*yFa5RKilu6kAAAAAAAAAAAAADmJ7AQ/original" /> | ||
|
|
||
| This extension package provides 3D elements, behaviors and plugins for G6. | ||
|
|
||
| ## Usage | ||
|
|
||
| 1. Install | ||
|
|
||
| ```bash | ||
| npm install @antv/g6-extension-3d | ||
| ``` | ||
|
|
||
| 2. Import and Register | ||
|
|
||
| > Where renderer, elements and lighting are necessary | ||
| ```js | ||
| import { ExtensionCategory, register } from '@antv/g6'; | ||
| import { DragCanvas3D, Light, Line3D, Sphere, renderer } from '@antv/g6-extension-3d'; | ||
|
|
||
| // 3d light plugin | ||
| register(ExtensionCategory.PLUGIN, '3d-light', Light); | ||
| // sphere node element | ||
| register(ExtensionCategory.NODE, 'sphere', Sphere); | ||
| // line edge element | ||
| register(ExtensionCategory.EDGE, 'line3d', Line3D); | ||
| // drag canvas in 3d scene | ||
| register(ExtensionCategory.BEHAVIOR, 'drag-canvas-3d', DragCanvas3D); | ||
| // camera setting plugin | ||
| register(ExtensionCategory.PLUGIN, 'camera-setting', CameraSetting); | ||
| ``` | ||
|
|
||
| 3. Use | ||
|
|
||
| ```js | ||
| import { Graph } from '@antv/g6'; | ||
|
|
||
| const graph = new Graph({ | ||
| container: 'container', | ||
| renderer, // use 3d renderer | ||
| data: { | ||
| // your data | ||
| }, | ||
| node: { | ||
| type: 'sphere', // use sphere node | ||
| }, | ||
| edge: { | ||
| type: 'line3d', // use 3d line edge | ||
| }, | ||
| behaviors: ['drag-canvas-3d'], | ||
| plugins: [ | ||
| // set camera configs, see: https://g.antv.antgroup.com/en/api/camera/intro | ||
| { | ||
| type: 'camera-setting', | ||
| projectionMode: 'perspective', | ||
| near: 0.1, | ||
| far: 1000, | ||
| fov: 45, | ||
| aspect: 1, | ||
| }, | ||
| // add directional light | ||
| { | ||
| type: '3d-light', | ||
| directional: { | ||
| direction: [0, 0, 1], | ||
| }, | ||
| }, | ||
| ], | ||
| }); | ||
| ``` | ||
|
|
||
| ## Resources | ||
|
|
||
| - [Lite Solar System](https://g6-next.antv.antgroup.com/en/examples/feature/default/#lite-solar-system) | ||
| - [3D Node](https://g6-next.antv.antgroup.com/en/examples/element/node/#3d-node) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| ## React extension for G6 | ||
|
|
||
| <img width="500" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*rWSiT6dnwfcAAAAAAAAAAAAADmJ7AQ/original" /> | ||
|
|
||
| This extension allows you to define G6 node by React component and JSX syntax. | ||
|
|
||
| ## Usage | ||
|
|
||
| 1. Install | ||
|
|
||
| ```bash | ||
| npm install @antv/g6-extension-react | ||
| ``` | ||
|
|
||
| 2. Import and Register | ||
|
|
||
| ```js | ||
| import { ExtensionCategory, register } from '@antv/g6'; | ||
| import { ReactNode, GNode } from '@antv/g6-extension-react'; | ||
|
|
||
| register(ExtensionCategory.NODE, 'react', ReactNode); | ||
| register(ExtensionCategory.NODE, 'g', GNode); | ||
| ``` | ||
|
|
||
| 3. Define Node | ||
|
|
||
| React Node: | ||
|
|
||
| ```jsx | ||
| const ReactNode = () => { | ||
| return <div>node</div>; | ||
| }; | ||
| ``` | ||
|
|
||
| G Node: | ||
|
|
||
| ```jsx | ||
| import { Group, Rect, Text } from '@antv/g6-extension-react'; | ||
|
|
||
| const GNode = () => { | ||
| return <Group> | ||
| <Rect width={100} height={100}></Rect> | ||
| <Text text={"node"} /> | ||
| <Group> | ||
| }; | ||
| ``` | ||
|
|
||
| 4. Use | ||
|
|
||
| Use ReactNode: | ||
|
|
||
| ```jsx | ||
| const graph = new Graph({ | ||
| // ... other options | ||
| node: { | ||
| type: 'react', | ||
| style: { | ||
| component: () => <GNode />, | ||
| }, | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| Use GNode: | ||
|
|
||
| ```jsx | ||
| const graph = new Graph({ | ||
| // ... other options | ||
| node: { | ||
| type: 'g', | ||
| style: { | ||
| component: () => <ReactNode />, | ||
| }, | ||
| }, | ||
| }); | ||
| ``` | ||
|
|
||
| ## Q&A | ||
|
|
||
| 1. Difference between ReactNode and GNode | ||
|
|
||
| ReactNode is a React component, while GNode support jsx syntax but can only use G tag node. | ||
|
|
||
| ## Resources | ||
|
|
||
| - [React node](https://g6-next.antv.antgroup.com/examples/element/custom-node/#react-node) | ||
| - [G node with JSX syntax](https://g6-next.antv.antgroup.com/en/examples/element/custom-node/#react-g) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -19,7 +19,8 @@ | |
| "src", | ||
| "esm", | ||
| "lib", | ||
| "dist" | ||
| "dist", | ||
| "README" | ||
| ], | ||
| "scripts": { | ||
| "build": "run-p build:*", | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| __tests__/**/*-actual.* | ||
| __tests__/**/*-actual.* | ||
|
|
||
| README.* |
Oops, something went wrong.