From 5dcbb5e510a2ca3552ac2bfced8fcddf39055913 Mon Sep 17 00:00:00 2001 From: hustcc Date: Fri, 15 Mar 2024 19:39:28 +0800 Subject: [PATCH] docs: update readme (#5544) * docs: update readme * docs: update readme en-US * docs: add CONTRIBUTING.md * chore: add a readme image and demo * fix: ci * chore: fix ci --- CONTRIBUTING.en-US.md | 64 +++++ CONTRIBUTING.md | 64 +++++ README.en-US.md | 216 ++++++---------- README.md | 209 ++++++---------- packages/g6/__tests__/dataset/force.json | 235 ++++++++++++++++++ packages/g6/__tests__/demo/case/index.ts | 1 + .../g6/__tests__/demo/case/layout-force.ts | 42 ++++ 7 files changed, 559 insertions(+), 272 deletions(-) create mode 100644 CONTRIBUTING.en-US.md create mode 100644 CONTRIBUTING.md create mode 100644 packages/g6/__tests__/dataset/force.json create mode 100644 packages/g6/__tests__/demo/case/layout-force.ts diff --git a/CONTRIBUTING.en-US.md b/CONTRIBUTING.en-US.md new file mode 100644 index 0000000000..82b596a6fc --- /dev/null +++ b/CONTRIBUTING.en-US.md @@ -0,0 +1,64 @@ +# Contribution Guide + +## Introduction + +First of all, thank you for considering contributing to G6! It's people like you that make the open-source community such a fantastic place to learn, inspire, and create. This document provides guidelines for contributing to G6. Please respect these guidelines to help maintain a collaborative and inclusive environment. + +## Ways to Contribute + +There are many ways you can contribute to G6: + +- **Reporting bugs**: If you find a bug, please check the issue tracker to see if it has already been reported. If not, open a new issue. Be sure to include a clear title, a detailed description, and as much relevant information as possible. +- **Suggesting enhancements**: New ideas are always welcome. Open an issue to suggest improvements or new features. +- **Writing documentation**: Good documentation is as important as the code itself. If you enjoy writing and are looking to help out, consider improving the docs. +- **Submitting pull requests**: Pull requests are essential for us to keep moving forward. Whether it's fixing a bug, implementing a feature, or improving documentation, every contribution is valuable. + +## Getting Started + +Before starting to contribute, make sure to: + +1. Fork the repository and create your branch from `v5s`. +2. If you're adding code, add tests that cover the new functionality/bug fix. +3. Ensure the test suite passes locally. +4. If you've changed APIs, update the documentation. +5. Make sure your code lints. +6. Write a clear log message for your commits. One-line messages are fine for small changes, but bigger changes should include more detail. + +## Pull Request Process + +1. Make sure your code adheres to the project's coding conventions (indentation, accurate comments, etc.) and that all of your commits are signed. +2. Update the README.md with any changes that are crucial to the project. +3. Increase the version numbers in any examples files and the README.md to the new version that this Pull Request would represent. +4. You may merge the Pull Request in once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you. + +## How to run the Project + +- Install dependence: + +```bash +$ pnpm install +``` + +- Debugger with live demo: + +```bash +$ cd packasges/g6 + +$ npm run dev +``` + +- Run test cases: + +```bash +$ cd packasges/g6 + +$ npm run test +``` + +- Preview locale website: + +```bash +$ cd packasges/site + +$ npm run dev +``` diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 0000000000..73817a4c53 --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,64 @@ +# 贡献指南 + +## 引言 + +首先，感谢您考虑为 G6 做出贡献！正是像您这样的人才让开源社区成为一个学习、启发和创造的绝佳场所。本文档提供了对 G6 做出贡献的指导原则。请遵守这些指南，以帮助维护一个协作和包容的环境。 + +## 贡献方式 + +您可以通过多种方式为 G6 做出贡献： + +- **报告错误**：如果您发现一个错误，请检查问题跟踪器，看看它是否已经被报告过。如果没有，请开设一个新的问题。确保包含一个清晰的标题、详细的描述以及尽可能多的相关信息。 +- **建议增强功能**：新想法总是受欢迎的。开设一个问题以建议改进或新增功能。 +- **编写文档**：良好的文档和代码本身一样重要。如果您喜欢写作并希望帮忙，请考虑改善文档。 +- **提交拉取请求（Pull Requests）**：拉取请求对我们保持持续进步至关重要。无论您是在修复一个错误、实现一个功能还是改进文档，每一份贡献都是宝贵的。 + +## 开始之前 + +在开始贡献之前，请确保： + +1. Fork 仓库并从 `v5` 分支创建您自己的分支。 +2. 如果您添加代码，请添加覆盖新功能/错误修复的测试。 +3. 确保本地测试套件通过。 +4. 如果您更改了 API，请更新文档。 +5. 确保您的代码遵循规范。 +6. 为您的提交写一个清晰的日志消息。对于小的更改，一行消息就足够了，但更大的更改应包括更多的细节。 + +## 拉取请求流程 + +1. 确保您的代码符合项目的编码规范（缩进、准确的注释等），并且您的所有提交都已签名。 +2. 如果有对项目至关重要的更改，请更新 README.md。 +3. 将任何示例文件和 README.md 中的版本号增加到这个拉取请求所代表的新版本。 +4. 一旦您得到两个其他开发者的签署，您可以合并拉取请求，如果您没有权限这样做，您可以请求第二个审阅者为您合并。 + +## 启动项目 + +- 安装依赖： + +```bash +$ pnpm install +``` + +- 调试 DEMO + +```bash +$ cd packasges/g6 + +$ npm run dev +``` + +- 运行单元测试 + +```bash +$ cd packasges/g6 + +$ npm run test +``` + +- 启动本地官网 + +```bash +$ cd packasges/site + +$ npm run dev +``` diff --git a/README.en-US.md b/README.en-US.md index 30aaff928b..6437dc3c28 100644 --- a/README.en-US.md +++ b/README.en-US.md @@ -1,193 +1,127 @@ -# G6: A Graph Visualization Framework in TypeScript -> The 5.0 beta version is currently undergoing rapid iteration, with the stable release expected on June 6, 2024. There may be changes to the API during this period, so please exercise caution when using it in stable online product. + English | [简体中文](./README.md) + +

+G6: A Graph Visualization Framework in TypeScript +

+ +> The G6 5.0 beta version has been released. There are still many details and experience issues, and we welcome you to try it out and provide feedback. Use it with caution in production environments for now. The official version will be released with 6.6! ![](https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png) -[![npm Version](https://img.shields.io/npm/v/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) -![typescript](https://img.shields.io/badge/language-typescript-red.svg) +[![npm Version](https://img.shields.io/npm/v/@antv/g6.svg@beta)](https://www.npmjs.com/package/@antv/g6) [![Build Status](https://github.com/antvis/g6/workflows/build/badge.svg?branch=v5)](https://github.com/antvis/g6/actions) [![Coverage Status](https://coveralls.io/repos/github/antvis/G6/badge.svg)](https://coveralls.io/github/antvis/G6) [![npm Download](https://img.shields.io/npm/dm/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) +![typescript](https://img.shields.io/badge/language-typescript-blue.svg) [![npm License](https://img.shields.io/npm/l/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) -[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g6.svg)](http://isitmaintained.com/project/antvis/g6) -[中文 README](README.md) +

+ Introduction • + Examples • + Tutorial • + API +

-## What is G6 +[G6](https://github.com/antvis/g6) is a graph visualization engine. It provides basic capabilities for graph visualization and analysis such as drawing, layout, analysis, interaction, animation, themes, and plugins. With G6, users can quickly build their own graph visualization and analysis applications, making relational data simple, transparent, and meaningful. -[G6](https://github.com/antvis/g6) is a graph visualization engine, which provides a set of basic mechanisms, including rendering, layout, analysis, interaction, animation, and other auxiliary tools. G6 aims to simplify the relationships, and help people to obtain the insight of relational data. + -Developers are able to build graph visualization **analysis** applications or graph visualization **modeling** applications easily. - - + -> Powerful Animation and Interactions + - - +## ✨ Features -> Powerful Layouts +G6, as a professional graph visualization engine, boasts the following features: -## Features (5.0 Alpha) +- **Rich Elements**: It comes with a variety of built-in node, edge, and Combo UI elements with extensive style configurations, supports data callbacks, and has a flexible mechanism for extending custom elements. +- **Controllable Interactions**: It includes more than 10 built-in interaction behaviors and offers a rich array of events, facilitating the expansion of custom interactive behaviors. +- **High-Performance Layout**: The engine features more than 10 common graph layouts, some of which leverage GPU and Rust parallel computing for enhanced performance, and it supports custom layout development. +- **Convenient Plugins**: Optimized built-in plugin functionality and performance, with flexible extensibility, making it easier to implement customized business capabilities. +- **Multiple Theme and Palettes**: Provides two sets of built-in themes, light and dark, that integrate over 20 popular community color palettes based on the AntV new color scheme. +- **Multi-Environment Rendering**: Harnessing the power of [G](https://github.com/antvis/g), it supports rendering in Canvas, SVG, and WebGL, as well as server-side rendering with Node.js; it also offers plugin packages that provide powerful 3D rendering and spatial interactions based on WebGL. +- **React Ecosystem**: By utilizing the React front-end ecosystem, it supports React nodes, significantly enriching the presentational styles of G6 nodes. -- Extensionable: All the modules (seven types) are integrated as plugins; -- Style and animation standards, supports level of details (see the graph below); -- Beautiful Built-in Theme and cound be customized (see the graph below); -- Layouts with Great Performance: More than 10 layout algorithms, supports GPU and Rust parallel computing, and custom layouts; -- Steerable Interactions: More than 10 basic interaction behaviors ; -- Friendly User Experience: Complete documents for different levels of user requirements. TypeScript supported. -- Multiple renderers: Canvas, SVG, WebGL; -- 3D Graph: -The gif is not fully loaded, [Click Here to See the Original Image](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qPrmQrdV77gAAAAAAAAAAAAADmJ7AQ/original) +## 🔨 Getting Started - - -> 3D Graph - -The gif is not fully loaded, [Click Here to See the Original Image](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BFvQ4r3P7UAAAAAAAAAAAAADmJ7AQ/original) - - - -> Animations and Level of Details - - - -> Built-in Themes and Custom Themes - - - -> Seven Types of Plugins - -- (TODO: migrate from v4) Abundant Built-in Items: Nodes and edges with free configurations; -- (TODO: migrate from v4) Convenient Components: Outstanding ability and performance; - -G6 concentrates on the principle of 'good by default'. In addition, the custom mechanism of the item, interaction behavior, and layout satisfies the customazation requirements. - -> Abundant Built-in Items - -## Installation (5.0 Alpha) +G6 is usually installed via a package manager such as npm or Yarn. ```bash -$ npm install @antv/g6@5.0.0-beta.28 +$ npm install @antv/g6@next ``` -## Usage (5.0 Alpha) +```bash +$ yarn add @antv/g6@next +``` - +The `Graph` object then can be imported from G6. -The configuration specification of the graph can be refered to: https://github.com/antvis/G6/blob/v5/packages/g6/src/types/spec.ts +```html +
+``` -Graph API: https://github.com/antvis/G6/blob/2b44df189dd2e851447ba5a09541c372b49cd658/packages/g6/src/types/graph.ts#L23 -A simple graph demo: - - - -[![Edit compassionate-lalande-5lxm7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/musing-matan-q255po?fontsize=14&hidenavigation=1&theme=dark) - -```js -import { Graph } from "@antv/g6"; +```ts +import { Graph } from '@antv/g6'; +// Get the Data. const data = { - nodes: [ - { - id: "node1", - label: "Node 1", - data: { - x: 150, - y: 150, - }, - }, - { - id: "node2", - label: "Node 2", - data: { - x: 400, - y: 150, - }, - }, - ], - edges: [ - { - id: "edge1", - label: "Edge 1", - source: "node1", - target: "node2", - data: {}, - }, - ], + nodes: [/* your nodes data */], + edges: [/* your edges data */], }; +// Create the Graph instance. const graph = new Graph({ - container: "container", - width: 500, - height: 500, + container: 'container', + autoFit: 'view', data, - node: (innerModel) => ({ - ...innerModel, - type: "circle", - data: { - ...innerModel.data, - labelShape: { - text: innerModel.label, - }, - labelBackgroundShape: {}, - iconShape: { - img: "https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg", - }, - }, - }), - edge: (innerModel) => ({ - ...innerModel, - type: "line", - data: { - labelShape: { - text: innerModel.label, - }, - labelBackgroundShape: {}, - }, - }), + node: { + palette: { + type: 'group', + field: 'cluster', + } + }, + layout: { + type: 'force', + }, + behaviors: ['drag-canvas', 'drag-node'], }); + +// Render the Graph. +graph.render(); ``` -## Development (5.0 Alpha) +All goes well, you can get the following lovely graph! -```bash -# install dependencies by pnpm in the root directory -$ pnpm install + -# enter packages/g6 -$ cd ./packages/g6 -# build g6 -$ npm run build +## 🌍 Ecosystem -# start the integration demos -$ npm run dev +- **Ant Design Charts**: A React chart library based on G2, G6, X6, L7. +- **Graphin**: A simple React wrapper based on G6, as well as an SDK for developing graph visualization applications. -# run test case -$ npm run test +For more ecosystem open-source projects, contributions are welcome. Please feel free to submit a PR for inclusion. -# run test case in watch mode -npm test -- --watch ./tests/unit/node-spec -DEBUG_MODE=1 npm test -- --watch ./tests/unit/node-spec -``` -## Documents (5.0 Alpha) +## 📮 Contributing -The documents will be ready after the 5.0 version being stable. +- **Issue Reporting**: If you encounter any issues with G6 during use, please feel free to submit an issue, along with the minimal sample code that can reproduce the problem. +- **Contribution Guide**: Information on how to get involved in the development and contribution to G6. +- **Ideas Discussion**: Discuss your ideas on GitHub Discussions or in the DingTalk group. -## How to Contribute +
+ + +
-Please let us know what you are you going to help. Do check out [issues](https://github.com/antvis/g6/issues) for bug reports or suggestions first. +## 📄 License -## License - -[MIT license](./LICENSE). +[MIT](./LICENSE). diff --git a/README.md b/README.md index c24bdb4b35..127ee3c6a4 100644 --- a/README.md +++ b/README.md @@ -1,180 +1,127 @@ -# G6：图分析引擎 -> 5.0 beta 版本中还在快速迭代中，预计 2024.06.06 发布正式版本，期间可能会有 API 的一些变更，线上业务谨慎使用。 + [English](./README.en-US.md) | 简体中文 + +

+G6：图可视分析引擎 +

+ +> G6 5.0 beta 版本已经发布，还有不少的细节体验问题，欢迎试用和反馈，线上产品暂时谨慎使用，6.6 发布正式版本！ ![](https://user-images.githubusercontent.com/6113694/45008751-ea465300-b036-11e8-8e2a-166cbb338ce2.png) -[![npm Version](https://img.shields.io/npm/v/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) -![typescript](https://img.shields.io/badge/language-typescript-red.svg) +[![npm Version](https://img.shields.io/npm/v/@antv/g6.svg@beta)](https://www.npmjs.com/package/@antv/g6) [![Build Status](https://github.com/antvis/g6/workflows/build/badge.svg?branch=v5)](https://github.com/antvis/g6/actions) [![Coverage Status](https://coveralls.io/repos/github/antvis/G6/badge.svg)](https://coveralls.io/github/antvis/G6) [![npm Download](https://img.shields.io/npm/dm/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) +![typescript](https://img.shields.io/badge/language-typescript-blue.svg) [![npm License](https://img.shields.io/npm/l/@antv/g6.svg)](https://www.npmjs.com/package/@antv/g6) -[![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g6.svg)](http://isitmaintained.com/project/antvis/g6) -[English README](README.en-US.md) +

+ 介绍 • + 案例 • + 教程 • + API +

-## 什么是 G6 +[G6](https://github.com/antvis/g6) 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画、主题、插件等图可视化和分析的基础能力。基于 G6，用户可以快速搭建自己的图可视化分析应用，让关系数据变得简单，透明，有意义。 -[G6](https://github.com/antvis/g6) 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。 + -基于 G6，用户可以快速搭建自己的 **图分析** 或 **图编辑** 应用。 + -## G6 的特性 (5.0 Alpha) + + + + + +## ✨ 特性 G6 作为一款专业的图可视化引擎，具有以下特性： -- 易扩展：七大插件化模块（见下图）； -- 样式、动画规范，信息分层（见下图）； -- 内置亮色、暗色主题，主题可自定义；动画易配置（见下图）； -- 高性能布局：内置了 10+ 常用的图布局，支持 GPU、Rust 并行计算，支持自定义布局； -- 可控的交互：内置 10+ 交互行为，支持自定义交互； -- 友好的体验：根据用户需求分层梳理文档，支持 TypeScript 类型推断； -- 运行时切换多渲染器：Canvas、SVG、WebGL； -- 3D 大图： +- **丰富的元素**：内置丰富的节点、边、Combo UI 元素，样式配置丰富，支持数据回调，且具备有灵活扩展自定义元素的机制。 +- **可控的交互**：内置 10+ 交互行为，且提供丰富的各类事件，便于扩展自定义的交互行为。 +- **高性能布局**：内置 10+ 常用的图布局，部分基于 GPU、Rust 并行计算提升性能，支持自定义布局。 +- **便捷的组件**：优化内置组件功能及性能，且有灵活的扩展性，便于业务实现定制能力。 +- **多主题色板**：提供了亮色、暗色两套内置主题，在 AntV 新色板前提下，融入 20+ 常用社区色板。 +- **多环境渲染**：发挥 [G](https://github.com/antvis/g) 能力， 支持 Canvas、SVG 以及 WebGL，和 Node.js 服务端渲染；基于 WebGL 提供强大 3D 渲染和空间交互的插件包。 +- **React 体系**：利用 React 前端生态，支持 React 节点，大大丰富 G6 的节点呈现样式。 -GIF 未完整加载，[点此看原图](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qPrmQrdV77gAAAAAAAAAAAAADmJ7AQ/original) - +## 🔨 开始使用 -> 3D 大图 - -GIF 未完整加载，[点此看原图](https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*1BFvQ4r3P7UAAAAAAAAAAAAADmJ7AQ/original) - - - -> 动画规范与信息分层 - - - -> 内置主题与自定义主题 - - - -> 七大插件化模块 - -- （待迁移）丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义； -- （待迁移）便捷的组件：优化内置组件功能及性能； - -除了默认好用、配置自由的内置功能，元素、交互、布局均具有高可扩展的自定义机制。 - -## 安装 (5.0 Alpha) +可以通过 NPM 或 Yarn 等包管理器来安装。 ```bash -$ npm install @antv/g6@5.0.0-beta.28 +$ npm install @antv/g6@next ``` -## 使用 (5.0 Alpha) +```bash +$ yarn add @antv/g6@next +``` -图配置 Specification 类型见：https://github.com/antvis/G6/blob/v5/packages/g6/src/types/spec.ts +成功安装之后，可以通过 import 导入 Chart 对象。 -Graph API 见：https://github.com/antvis/G6/blob/2b44df189dd2e851447ba5a09541c372b49cd658/packages/g6/src/types/graph.ts#L23 +```html +
+``` -最简单的图 Demo： - - - -[![Edit compassionate-lalande-5lxm7](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/embed/musing-matan-q255po?fontsize=14&hidenavigation=1&theme=dark) - -```js -import { Graph } from "@antv/g6"; +```ts +import { Graph } from '@antv/g6'; +// 准备数据 const data = { - nodes: [ - { - id: "node1", - label: "Node 1", - data: { - x: 150, - y: 150, - }, - }, - { - id: "node2", - label: "Node 2", - data: { - x: 400, - y: 150, - }, - }, - ], - edges: [ - { - id: "edge1", - label: "Edge 1", - source: "node1", - target: "node2", - data: {}, - }, - ], + nodes: [/* your nodes data */], + edges: [/* your edges data */], }; +// 初始化图表实例 const graph = new Graph({ - container: "container", - width: 500, - height: 500, + container: 'container', + autoFit: 'view', data, - node: (innerModel) => ({ - ...innerModel, - type: "circle", - data: { - ...innerModel.data, - labelShape: { - text: innerModel.label, - }, - labelBackgroundShape: {}, - iconShape: { - img: "https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg", - }, - }, - }), - edge: (innerModel) => ({ - ...innerModel, - type: "line", - data: { - labelShape: { - text: innerModel.label, - }, - labelBackgroundShape: {}, - }, - }), + node: { + palette: { + type: 'group', + field: 'cluster', + } + }, + layout: { + type: 'force', + }, + behaviors: ['drag-canvas', 'drag-node'], }); + +// 渲染可视化 +graph.render(); ``` -## 开发 (5.0 Alpha) +一切顺利，你可以得到下面的力导图! -```bash -# 在项目的根目录安装依赖 + -$ pnpm install -# 从项目根目录进入到 g6 包文件目录下 -$ cd packages/g6 +## 🌍 生态 -# 构建 -$ npm run build + - **Ant Design Charts**： React 图表库，基于 G2、G6、X6、L7。 + - **Graphin**：基于 G6 的 React 简单封装，以及图可视化应用研发的 SDK。 -# 启动集成测试 demo -$ npm run dev +更多生态开源项目，欢迎 PR 收录进来。 -# 运行所有单元测试 -$ npm run test -# 运行单个单元测试 -npm test -- --watch ./tests/unit/node-spec -DEBUG_MODE=1 npm test -- --watch ./tests/unit/node-spec -``` +## 📮 贡献 -## 文档 +- **问题反馈**：使用过程遇到的 G6 的问题，欢迎提交 Issue，并附上可以复现问题的最小案例代码。 +- **贡献指南**：如何参与到 G6 的开发和贡献。 +- **想法讨论**：在 GitHub Discussion 上或者钉钉群里面讨论。 -使用文档待 5.0 稳定后完善。 +
+ + +
-## 如何贡献 -请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 [issues](https://github.com/antvis/g6/issues) 描述 bug 或建议。 +## 📄 License -## License - -[MIT license](./LICENSE). +[MIT](./LICENSE). diff --git a/packages/g6/__tests__/dataset/force.json b/packages/g6/__tests__/dataset/force.json new file mode 100644 index 0000000000..ea01f56974 --- /dev/null +++ b/packages/g6/__tests__/dataset/force.json @@ -0,0 +1,235 @@ +{ + "nodes": [ + { + "id": "node0", + "style": { + "size": 50 + }, + "data": { + "cluster": "node0" + } + }, + { + "id": "node1", + "style": { + "size": 30 + }, + "data": { + "cluster": "node1" + } + }, + { + "id": "node2", + "style": { + "size": 30 + }, + "data": { + "cluster": "node2" + } + }, + { + "id": "node3", + "style": { + "size": 30 + }, + "data": { + "cluster": "node3" + } + }, + { + "id": "node4", + "style": { + "size": 30 + }, + "data": { + "cluster": "node4" + } + }, + { + "id": "node5", + "style": { + "size": 30 + }, + "data": { + "isLeaf": true, + "cluster": "node5" + } + }, + { + "id": "node6", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node6" + } + }, + { + "id": "node7", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node7" + } + }, + { + "id": "node8", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node8" + } + }, + { + "id": "node9", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node9" + } + }, + { + "id": "node10", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node10" + } + }, + { + "id": "node11", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node11" + } + }, + { + "id": "node12", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node12" + } + }, + { + "id": "node13", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node13" + } + }, + { + "id": "node14", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node14" + } + }, + { + "id": "node15", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node15" + } + }, + { + "id": "node16", + "style": { + "size": 15 + }, + "data": { + "isLeaf": true, + "cluster": "node16" + } + } + ], + "edges": [ + { + "source": "node0", + "target": "node1" + }, + { + "source": "node0", + "target": "node2" + }, + { + "source": "node0", + "target": "node3" + }, + { + "source": "node0", + "target": "node4" + }, + { + "source": "node0", + "target": "node5" + }, + { + "source": "node1", + "target": "node6" + }, + { + "source": "node1", + "target": "node7" + }, + { + "source": "node2", + "target": "node8" + }, + { + "source": "node2", + "target": "node9" + }, + { + "source": "node2", + "target": "node10" + }, + { + "source": "node2", + "target": "node11" + }, + { + "source": "node2", + "target": "node12" + }, + { + "source": "node2", + "target": "node13" + }, + { + "source": "node3", + "target": "node14" + }, + { + "source": "node3", + "target": "node15" + }, + { + "source": "node3", + "target": "node16" + } + ] +} diff --git a/packages/g6/__tests__/demo/case/index.ts b/packages/g6/__tests__/demo/case/index.ts index c45dd2bbff..8555bfd2dc 100644 --- a/packages/g6/__tests__/demo/case/index.ts +++ b/packages/g6/__tests__/demo/case/index.ts @@ -19,6 +19,7 @@ export * from './layout-combo-combined'; export * from './layout-concentric'; export * from './layout-dagre-flow'; export * from './layout-dagre-flow-combo'; +export * from './layout-force'; export * from './layout-fruchterman-basic'; export * from './layout-fruchterman-cluster'; export * from './layout-fruchterman-fix'; diff --git a/packages/g6/__tests__/demo/case/layout-force.ts b/packages/g6/__tests__/demo/case/layout-force.ts new file mode 100644 index 0000000000..f2ec7c14b8 --- /dev/null +++ b/packages/g6/__tests__/demo/case/layout-force.ts @@ -0,0 +1,42 @@ +import { Graph } from '@/src'; +import data from '@@/dataset/force.json'; +import type { STDTestCase } from '../types'; + +export const layoutForce: STDTestCase = async (context) => { + const graph = new Graph({ + ...context, + data, + padding: 20, + autoFit: 'view', + behaviors: ['zoom-canvas', 'drag-canvas', 'drag-node', 'click-select'], + layout: { + type: 'force', + }, + node: { + style: { + labelText: (d: any) => d.id, + labelMaxWidth: '300%', + }, + palette: { + type: 'group', + field: 'cluster', + color: [ + '#1783FF', + '#00C9C9', + '#F08F56', + '#D580FF', + '#7863FF', + '#DB9D0D', + '#60C42D', + '#FF80CA', + '#2491B3', + '#17C76F', + ], + }, + }, + }); + + await graph.render(); + + return graph; +};