diff --git a/packages/g6/__tests__/index.html b/packages/g6/__tests__/index.html index 8c515b68cf5..ca1d33b2116 100644 --- a/packages/g6/__tests__/index.html +++ b/packages/g6/__tests__/index.html @@ -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 { @@ -49,9 +45,8 @@ -
-
-
+
+
diff --git a/packages/site/docs/manual/feature-common/treeToGraphData.md b/packages/site/docs/manual/feature-common/treeToGraphData.md index 7d4c1c90e27..6e6717e386f 100644 --- a/packages/site/docs/manual/feature-common/treeToGraphData.md +++ b/packages/site/docs/manual/feature-common/treeToGraphData.md @@ -39,6 +39,11 @@ createGraph( type: 'compact-box', direction: 'TB', }, + node: { + style: { + ports: [{ placement: 'center' }], + }, + }, edge: { type: 'cubic-vertical', }, diff --git a/packages/site/docs/manual/feature.en.md b/packages/site/docs/manual/feature.en.md index 788926f6a0f..1f89156eb88 100644 --- a/packages/site/docs/manual/feature.en.md +++ b/packages/site/docs/manual/feature.en.md @@ -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 { @@ -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 { @@ -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 @@ -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). + + ## 🌍 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). diff --git a/packages/site/docs/manual/feature.zh.md b/packages/site/docs/manual/feature.zh.md index 5571a18334b..4bbd8366f06 100644 --- a/packages/site/docs/manual/feature.zh.md +++ b/packages/site/docs/manual/feature.zh.md @@ -3,13 +3,13 @@ title: 特性 order: 1 --- -## 🏖️ 全新设计图范式 +## 🏖️ 全新设计图配置范式 -G6 5.0 重新设计了 Options 范式，在保证能力完善的基础上，优化配置项结构，更加直观、易于理解。 +G6 5.0 重新设计了图配置范式，在保证能力完善的基础上，优化配置项结构，更加直观、易于理解。 仅需快速了解基本[核心概念](/manual/core-concept/graph)，即可快速上手 G6，快速实现图可视化。 -**😰 4.0 范式** 嵌套结构复杂，语义化能力较弱 +**😰 4.0 配置项** 嵌套结构复杂，语义化能力较弱 ```typescript { @@ -37,7 +37,7 @@ G6 5.0 重新设计了 Options 范式，在保证能力完善的基础上，优 } ``` -**😄 5.0 范式** 结构清晰，易于理解 +**😄 5.0 配置项** 结构清晰，易于理解 ```typescript { @@ -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 设计，更加符合现代前端框架的设计风格。 ## 🌲 合并图与树图 @@ -134,6 +134,8 @@ const graph = new Graph({ G6 5.0 内置了亮色、暗色两套主题，并可基于使用场景进行灵活定制，具体可参考[自定义主题](/manual/custom-extension/theme)。 + + ## 🌍 3D 大图 G6 5.0 提供了 3D 大图渲染、布局、交互能力，从 `@antv/g6-extension-3d` 中引入 3D 元素、渲染器、交互等注册即可使用，详见：[使用 3D](/manual/further-reading/3d)。