# F6
**Repository Path**: openwayne/F6
## Basic Information
- **Project Name**: F6
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-08
- **Last Updated**: 2024-11-26
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# F6：移动端图可视化引擎
[](https://travis-ci.org/antvis/f6) [](https://codecov.io/gh/antvis/f6)   [](https://www.npmjs.com/package/@antv/f6) [](https://npmjs.org/package/@antv/f6) [](http://isitmaintained.com/project/antvis/f6 'Percentage of issues still open')
[English README](README.md)
## 什么是 f6
[F6](https://github.com/antvis/f6) 是一个移动端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明，简单。让用户获得关系数据的 Insight。
基于 F6，用户可以快速搭建自己的 **图分析** 应用。 
> 强大的动画及交互
> 强大的布局
## F6 的特性
F6 作为一款专业的图可视化引擎，具有以下特性：
- 丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义；
- 可控的交互：内置 10+ 交互行为，支持自定义交互；
- 强大的布局：内置了 10+ 常用的图布局，支持自定义布局；
- 便捷的组件：优化内置组件功能及性能；
- 友好的体验：根据用户需求分层梳理文档，支持 TypeScript 类型推断。
除了默认好用、配置自由的内置功能，元素、交互、布局均具有高可扩展的自定义机制。
> 丰富的图元素
## 安装
```bash
$ npm install @antv/f6
```
## 使用
- demo
```js
import F6 from '@antv/f6';
import graphData from './data';
import dagreLayout from '@antv/f6/dist/extends/layout/dagreLayout';
import TreeGraph from '@antv/f6/dist/extends/graph/treeGraph';
F6.registerLayout('dagreLayout', dagreLayout);
F6.registerGraph('TreeGraph', TreeGraph);
Page({
data: {
width: 300,
height: 400,
pixelRatio: 1,
},
onLoad() {
const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();
this.setData({
width: windowWidth,
height: windowHeight,
pixelRatio: pixelRatio,
});
},
onCanvasInit(ctx, rect, canvas, renderer) {
console.log(ctx, rect, canvas, renderer);
this.graph = new F6.TreeGraph({
context: ctx,
renderer,
width: this.data.width,
height: this.data.height,
linkCenter: true,
modes: {
default: ['drag-canvas', 'zoom-canvas'],
},
defaultNode: {
size: 40,
},
layout: {
type: 'compactBox',
direction: 'RL',
getId: function getId(d) {
return d.id;
},
getHeight: () => {
return 26;
},
getWidth: () => {
return 26;
},
getVGap: () => {
return 20;
},
getHGap: () => {
return 30;
},
radial: false,
},
});
this.graph.node(function (node) {
return {
label: node.id,
};
});
this.graph.data(graphData);
this.graph.render();
this.graph.fitView();
},
onTouch(e) {
this.graph.emitEvent(e);
},
});
```
更多关于 F6 使用的问题，请参考[快速上手](https://f6.antv.vision/zh/docs/manual/getting-started)。
## 开发
```bash
$ npm install
# lerna bootstrap for multiple packages
$ npm run bootstrap
# build the packages
$ npm run build:all
# if you wanna watch one of the packages, e.g. packages/core
$ cd ./packages/core
$ npm run watch
# run test case
$ npm test
# run test case in watch mode
npm test -- --watch ./tests/unit/algorithm/find-path-spec
DEBUG_MODE=1 npm test -- --watch ./tests/unit/algorithm/find-path-spec
```
## 文档
- 入门教程
- 核心概念
- 扩展阅读
- API
## F6 图可视化交流群
欢迎各界 F6 使用者、图可视化爱好者加入 **F6 超级服务群**（钉钉群，使用钉钉扫一扫加入）讨论与交流。
## 如何贡献
请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 [issues](https://github.com/antvis/f6/issues) 描述 bug 或建议。
成为一个贡献者前请阅读 [代码贡献规范](https://github.com/antvis/f6/blob/master/packages/f6/CONTRIBUTING.zh-CN.md).
## License
[MIT license](./LICENSE).