本期推荐的Graphin 取名意为 Graph Insight（图的分析洞察），是一个基于 G6 封装的 React 组件库。是一个京东开源的一站式人脸识别研究平台——FaceX-Zoo。
功能特性
高颜值元素，规范的样式配置
Graphin 对于图元素的视觉映射做了规范化处理。一个 Graphin 内置节点包含：容器，标签，光晕，图标，徽标 5 部分，每一部分均可以通过数据驱动。内置的边包含：路径，标签，光晕 3 部分，同时针对业务中常用的标签背景，自环，多边，虚线等，也有响应的数据样式配置。
自动布局，轻松应对复杂场景
Graphin 内置 10 款网图布局，4 款树图布局，满足你对于不同数据类型，不同分析场景的布局需求。针对复杂业务场景下的布局切换，动态布局，子图布局等，均能通过数据驱动布局，轻松实现。
细腻的交互，轻松自定义
Graphin 提供了 13 种交互组件。包括画布的缩放，平移，圈选，拉索，自动 Resize，也包括元素的拖拽，选中，悬停，高亮，展开收起等，满足你对于不同分析场景的交互需求。
舒心的开发体验，符合 React 用户心智
使用
使用 Graphin 画布组件
import React from 'react';
import Graphin from '@antv/graphin';
// mock数据
const data = Utils.mock(10).circle().graphin();
export default () => {
return <Graphin data={data} />;
};使用 Graphin 分析组件
import React from 'react';
import Graphin from '@antv/graphin';
import { MiniMap } from '@antv/graphin-components';
// mock数据
const data = Utils.mock(10).circle().graphin();
export default () => {
return (
<Graphin data={data}>
<MiniMap />
</Graphin>
);
};使用 Graphin 字体图标
import React from 'react';
import Graphin from '@antv/graphin';
import { MiniMap } from '@antv/graphin-components';
// 引入图标资源文件
import iconLoader from '@antv/graphin-icons';
import '@antv/graphin-icons/dist/index.css';
// mock数据
const data = Utils.mock(10).circle().graphin();
// 注册到 Graphin 中
const { fontFamily, glyphs } = iconLoader();
const icons = Graphin.registerFontFamily(iconLoader);
// 使用图标
data.nodes.forEach(node => {
node.style = {
icon: {
type: 'font', // 指定图标为Font类型
fontFamily: fontFamily, // 指定FontFamily
value: icons.home, // 指定图标的值
},
};
});
export default () => {
return (
<Graphin data={data}>
<MiniMap />
</Graphin>
);
};安装
安装依赖
如果你是使用 React 的 Web 开发者，那么你大可将 Graphin 当作一个普通的 React 组件来使用。
yarn add @antv/graphin@latest --save
yarn add @antv/graphin-components@latest --save
yarn add @antv/graphin-icons --save把关系数据可视化出来
完成一个图分析产品的第一步，就是将关系数据可视化出来。关系数据是非常典型的图结构，由节点 Node 和边 Edge 组成。Node 中只有 id 是必须参数，Edge 中只有 source 和 target 是必须参数，它分别代表边的开始节点和结束节点的 id
Graphin 特有布局
Graphin 2.0 的布局全面拥抱 G6，详情请参考。但是 Graphin 也内置了 2 款布局，分别为graphin-force和preset布局
- graphin-force 是基于电荷弹簧模型的力导布局算法，在内部内置tweak算法，可以实现力导的增量布局
- preset 顾名思义是预设布局，当用户设置此布局，则 graphin 内部会按照用户给定的数据 nodes 中的坐标信息(x,y)布局。当业务中需要布局缓存策略，或者保存画布再次进入的时候，此布局非常有用。
