1 Star 0 Fork 0

openwayne / F6

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未指定开源许可证,未经作者的许可,此代码仅用于学习,不能用于其他用途。
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README-zh_CN.md

F6:移动端图可视化引擎

travis-ci codecov typescript MIT npm package NPM downloads Percentage of issues still open

English README

什么是 f6

F6 是一个移动端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。

基于 F6,用户可以快速搭建自己的 图分析 应用。

强大的动画及交互

强大的布局

F6 的特性

F6 作为一款专业的图可视化引擎,具有以下特性:

  • 丰富的元素:内置丰富的节点与边元素,自由配置,支持自定义;
  • 可控的交互:内置 10+ 交互行为,支持自定义交互;
  • 强大的布局:内置了 10+ 常用的图布局,支持自定义布局;
  • 便捷的组件:优化内置组件功能及性能;
  • 友好的体验:根据用户需求分层梳理文档,支持 TypeScript 类型推断。

除了默认好用、配置自由的内置功能,元素、交互、布局均具有高可扩展的自定义机制。

丰富的图元素

安装

$ npm install @antv/f6

使用

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 使用的问题,请参考快速上手

开发

$ 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

文档

F6 图可视化交流群

欢迎各界 F6 使用者、图可视化爱好者加入 F6 超级服务群(钉钉群,使用钉钉扫一扫加入)讨论与交流。

如何贡献

请让我们知道您要解决或贡献什么,所以在贡献之前请先提交 issues 描述 bug 或建议。

成为一个贡献者前请阅读 代码贡献规范.

License

MIT license.

仓库评论 ( 0 )

你可以在登录后,发表评论

简介

暂无描述 展开 收起
TypeScript 等 3 种语言
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
1
https://gitee.com/openwayne/F6.git
git@gitee.com:openwayne/F6.git
openwayne
F6
F6
master

搜索帮助

182229 41614e54 1850385 182230 7885ed45 1850385