《开源精选》是我们分享Github、Gitee等开源社区中优质项目的栏目，包括技术、学习、实用与各种有趣的内容。本期推荐的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 --saveyarn add @antv/graphin-components@latest --saveyarn 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)布局。当业务中需要布局缓存策略，或者保存画布再次进入的时候，此布局非常有用。

更多内容：