代码拉取完成,页面将自动刷新
F6 是一个移动端图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。
基于 F6,用户可以快速搭建自己的 图分析 应用。
强大的动画及交互
强大的布局
F6 作为一款专业的图可视化引擎,具有以下特性:
除了默认好用、配置自由的内置功能,元素、交互、布局均具有高可扩展的自定义机制。
丰富的图元素
$ 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 超级服务群(钉钉群,使用钉钉扫一扫加入)讨论与交流。
请让我们知道您要解决或贡献什么,所以在贡献之前请先提交 issues 描述 bug 或建议。
成为一个贡献者前请阅读 代码贡献规范.
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。