Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs(site): update docs #5815

Merged
merged 1 commit into from
Jun 4, 2024
Merged

docs(site): update docs #5815

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 4 additions & 9 deletions packages/g6/__tests__/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,10 @@
transition: all 0.5s;
}

#app {
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
}

#panel {
z-index: 1;
position: absolute;
right: 0;
}

#container {
Expand All @@ -49,9 +45,8 @@
</head>

<body style="font-family: Arial, Helvetica, sans-serif">
<div id="app">
<div id="panel"></div>
</div>
<div id="panel"></div>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>
5 changes: 5 additions & 0 deletions packages/site/docs/manual/feature-common/treeToGraphData.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,11 @@ createGraph(
type: 'compact-box',
direction: 'TB',
},
node: {
style: {
ports: [{ placement: 'center' }],
},
},
edge: {
type: 'cubic-vertical',
},
Expand Down
14 changes: 8 additions & 6 deletions packages/site/docs/manual/feature.en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ title: Feature
order: 1
---

## 🏖️ Brand New Design Paradigm for Graphs
## 🏖️ Brand New Design Specification for Graphs

G6 version 5.0 has redesigned the Options paradigm. While ensuring comprehensive capabilities, it optimizes the options structure to be more intuitive and easier to understand.
G6 version 5.0 has redesigned the Options specification. While ensuring comprehensive capabilities, it optimizes the options structure to be more intuitive and easier to understand.

You only need to quickly grasp the basic [core concepts](/en/manual/core-concept/graph) to get started with G6 quickly and achieve graph visualization without delay.

**😰 The 4.0 Paradigm** had a complex nested structure and was less semantically capable
**😰 The 4.0 Options** had a complex nested structure and was less semantically capable

```typescript
{
Expand Down Expand Up @@ -37,7 +37,7 @@ You only need to quickly grasp the basic [core concepts](/en/manual/core-concept
}
```

**😄 The 5.0 Paradigm** has a clear structure and is easy to understand
**😄 The 5.0 Options** has a clear structure and is easy to understand

```typescript
{
Expand All @@ -55,13 +55,13 @@ You only need to quickly grasp the basic [core concepts](/en/manual/core-concept
}
}
},
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
}
```

## 🔨 Brand New API Design

G6 5.0 has redesigned its API, adopting a consistent naming convention.
G6 5.0 features a cleaner, easy-to-use API design that is more in line with modern front-end frameworks.

## 🌲 Merging Graphs with Tree Graphs

Expand Down Expand Up @@ -113,6 +113,8 @@ const graph = new Graph({

G6 5.0 comes with two built-in themes: light and dark, and allows for flexible customization based on the use case. For details, please refer to [Custom Theme](/en/manual/custom-extension/theme).

<image width="300" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gASzQbsbAaIAAAAAAAAAAAAADmJ7AQ/original"></image>

## 🌍 3D Large Graphs

G6 5.0 provides 3D rendering, layout, interaction capabilities, and can be used by import 3d elements, renderer, and behaviors from `@antv/g6-extension-3D` registration, see: [Using 3D](/manual/further-reading/3d).
Expand Down
14 changes: 8 additions & 6 deletions packages/site/docs/manual/feature.zh.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,13 @@ title: 特性
order: 1
---

## 🏖️ 全新设计图范式
## 🏖️ 全新设计图配置范式

G6 5.0 重新设计了 Options 范式，在保证能力完善的基础上，优化配置项结构，更加直观、易于理解。
G6 5.0 重新设计了图配置范式，在保证能力完善的基础上，优化配置项结构，更加直观、易于理解。

仅需快速了解基本[核心概念](/manual/core-concept/graph)，即可快速上手 G6，快速实现图可视化。

**😰 4.0 范式** 嵌套结构复杂，语义化能力较弱
**😰 4.0 配置项** 嵌套结构复杂，语义化能力较弱

```typescript
{
Expand Down Expand Up @@ -37,7 +37,7 @@ G6 5.0 重新设计了 Options 范式，在保证能力完善的基础上，优
}
```

**😄 5.0 范式** 结构清晰，易于理解
**😄 5.0 配置项** 结构清晰，易于理解

```typescript
{
Expand All @@ -55,13 +55,13 @@ G6 5.0 重新设计了 Options 范式，在保证能力完善的基础上，优
}
}
},
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node'],
behaviors: ['zoom-canvas', 'drag-canvas', 'drag-element'],
}
```

## 🔨 全新 API 设计

G6 5.0 重新设计了 API，采用了一致的命名规范
G6 5.0 采用了更加简洁、易用的 API 设计，更加符合现代前端框架的设计风格。

## 🌲 合并图与树图

Expand Down Expand Up @@ -134,6 +134,8 @@ const graph = new Graph({

G6 5.0 内置了亮色、暗色两套主题，并可基于使用场景进行灵活定制，具体可参考[自定义主题](/manual/custom-extension/theme)。

<image width="300" src="https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*gASzQbsbAaIAAAAAAAAAAAAADmJ7AQ/original"></image>

## 🌍 3D 大图

G6 5.0 提供了 3D 大图渲染、布局、交互能力，从 `@antv/g6-extension-3d` 中引入 3D 元素、渲染器、交互等注册即可使用，详见：[使用 3D](/manual/further-reading/3d)。
Expand Down
Loading