{"id":20461350,"url":"https://github.com/antvis/f6","last_synced_at":"2025-05-16T11:06:45.750Z","repository":{"id":39407164,"uuid":"369462204","full_name":"antvis/F6","owner":"antvis","description":"F6 is a graph visualization engine which provides quick and smooth operations on mobile devices.","archived":false,"fork":false,"pushed_at":"2024-12-26T11:03:16.000Z","size":76638,"stargazers_count":144,"open_issues_count":57,"forks_count":24,"subscribers_count":16,"default_branch":"master","last_synced_at":"2025-05-07T04:25:00.083Z","etag":null,"topics":["framework","graph","miniapp","mobile","visualization"],"latest_commit_sha":null,"homepage":"https://f6.antv.vision","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antvis.png","metadata":{"files":{"readme":"README-zh-CN.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-21T08:10:16.000Z","updated_at":"2025-04-04T03:48:25.000Z","dependencies_parsed_at":"2025-02-24T11:13:14.179Z","dependency_job_id":"4a85518a-90a1-405b-8b90-b2453ee3eed2","html_url":"https://github.com/antvis/F6","commit_stats":{"total_commits":472,"total_committers":13,"mean_commits":36.30769230769231,"dds":0.5084745762711864,"last_synced_commit":"75fc5ac90a0936c3531b1263d5533acd527be363"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FF6","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FF6/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FF6/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FF6/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/F6/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254439909,"owners_count":22071522,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["framework","graph","miniapp","mobile","visualization"],"created_at":"2024-11-15T12:24:56.977Z","updated_at":"2025-05-16T11:06:45.635Z","avatar_url":"https://github.com/antvis.png","language":"JavaScript","readme":"# F6：移动端图可视化引擎\n\n![](https://gw.alipayobjects.com/mdn/rms_5c3b4a/afts/img/A*KV1pSIPeJPAAAAAAAAAAAAAAARQnAQ) [![travis-ci](https://img.shields.io/travis/antvis/f6.svg)](https://travis-ci.org/antvis/f6) [![codecov](https://codecov.io/gh/antvis/f6/branch/master/graph/badge.svg)](https://codecov.io/gh/antvis/f6) ![typescript](https://img.shields.io/badge/language-typescript-red.svg) ![MIT](https://img.shields.io/badge/license-MIT-000000.svg) [![npm package](https://img.shields.io/npm/v/@antv/f6.svg)](https://www.npmjs.com/package/@antv/f6) [![NPM downloads](http://img.shields.io/npm/dm/@antv/f6.svg)](https://npmjs.org/package/@antv/f6) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/f6.svg)](http://isitmaintained.com/project/antvis/f6 \"Percentage of issues still open\")\n\n[English](./README-en-US.md) | 简体中文\n\n## 欢迎扫码体验\n\n\u003cimg src='https://gw.alipayobjects.com/mdn/rms_5c3b4a/afts/img/A*-VctS49Qe6QAAAAAAAAAAAAAARQnAQ' width=550 alt='img'/\u003e\n\n## 什么是 F6\n\n\u003ca href='https://github.com/antvis/f6' target='_blank'\u003eF6\u003c/a\u003e 是一款可以快速、流畅运行于移动设备中的图可视化引擎，通过丰富的布局、组件及分析能力，帮助用户落地跨平台的图可视化应用解决方案。在 H5、小程序等移动端平台上，对包体积、性能有更高的要求，也需要定义一套合适的交互模式。针对以上问题，我们在 G6 的基础上重新设计并构建了 F6。F6 不仅具有基础的关联图绘制、事件、动画，同时内置了常用的移动端交互模式、丰富的布局和分析组件，通过简单的配置即可使用。\n\n\u003cimg src='https://raw.githubusercontent.com/antvis/F6/master/examples.gif' width='100%' alt='img'/\u003e\n\n如果您还没有使用过 F6， 建议通过 [快速上手](https://f6.antv.vision/zh/docs/manual/getting-started) 抢先体验 F6 的魅力。\n\n## F6 文档\n\n- [F6 入门教程](https://f6.antv.vision/zh/docs/manual/introduction)\n- [F6 核心概念](https://f6.antv.vision/zh/docs/manual/middle/overview)\n- [F6 扩展阅读](https://f6.antv.vision/zh/docs/manual/advanced/coordinate-system)\n- [API](https://f6.antv.vision/zh/docs/api/Graph)\n- [示例](https://f6.antv.vision/zh/docs/examples/tree/compactBox)\n\n## 安装\n\n```bash\n$ npm install @antv/f6\n```\n\n## 使用\n\n\u003cimg src=\"https://gw.alipayobjects.com/mdn/rms_5c3b4a/afts/img/A*g8A8T6urwOEAAAAAAAAAAAAAARQnAQ\" width=500 alt='' /\u003e\n\n- \u003ca href='https://herbox-embed.alipay.com/p/f6/demo' target='_blank'\u003edemo\u003c/a\u003e\n\n```js\nimport F6 from \"@antv/f6\";\nimport graphData from \"./data\";\nimport dagreLayout from \"@antv/f6/dist/extends/layout/dagreLayout\";\nimport TreeGraph from \"@antv/f6/dist/extends/graph/treeGraph\";\n\nF6.registerLayout(\"dagreLayout\", dagreLayout);\nF6.registerGraph(\"TreeGraph\", TreeGraph);\n\nPage({\n  data: {\n    width: 300,\n    height: 400,\n    pixelRatio: 1,\n  },\n  onLoad() {\n    const { windowWidth, windowHeight, pixelRatio } = my.getSystemInfoSync();\n    this.setData({\n      width: windowWidth,\n      height: windowHeight,\n      pixelRatio: pixelRatio,\n    });\n  },\n  onCanvasInit(ctx, rect, canvas, renderer) {\n    this.graph = new F6.TreeGraph({\n      context: ctx,\n      renderer,\n      width: this.data.width,\n      height: this.data.height,\n      linkCenter: true,\n      modes: {\n        default: [\"drag-canvas\", \"zoom-canvas\"],\n      },\n      defaultNode: {\n        size: 40,\n      },\n      layout: {\n        type: \"compactBox\",\n        direction: \"RL\",\n        getId: function getId(d) {\n          return d.id;\n        },\n        getHeight: () =\u003e {\n          return 26;\n        },\n        getWidth: () =\u003e {\n          return 26;\n        },\n        getVGap: () =\u003e {\n          return 20;\n        },\n        getHGap: () =\u003e {\n          return 30;\n        },\n        radial: false,\n      },\n    });\n\n    this.graph.node(function (node) {\n      return {\n        label: node.id,\n      };\n    });\n\n    this.graph.data(graphData);\n    this.graph.render();\n    this.graph.fitView();\n  },\n  onTouch(e) {\n    this.graph.emitEvent(e);\n  },\n  onUnload() {\n    this.graph?.destroy();\n  },\n});\n```\n\n## 如何开发\n\n```bash\n$ npm install -g @microsoft/rush\n\n# update dependencies\n$ rush update\n\n# build the packages\n$ rush build\n\n# demo\n$ cd packages/f6 \u0026\u0026 rushx storybook\n\n```\n\n更详细的内容请参考 [快速上手](https://f6.antv.vision/zh/docs/manual/getting-started) 文档。\n\n## 如何贡献\n\n请让我们知道您要解决或贡献什么，所以在贡献之前请先提交 \u003ca href='https://github.com/antvis/f6/issues' target='_blank'\u003eissues\u003c/a\u003e 描述 bug 或建议。\n\n成为一个贡献者前请阅读 \u003ca href='https://github.com/antvis/F6/blob/master/packages/f6/CONTRIBUTING.zh-CN.md' target='_blank'\u003e代码贡献规范\u003c/a\u003e。\n\n## License\n\n\u003ca href='https://github.com/antvis/f6/blob/master/LICENSE' target='_blank'\u003eMIT license\u003c/a\u003e。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Ff6","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2Ff6","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Ff6/lists"}