Graphin

简体中文 | English

🌾 新产品！

2022.06.06 ，这天恰逢 G6 开源 4 周年，也是中国传统节气芒种日，我们对外发布一款图分析方向的新品 G6VP，用户无需代码开发，即可在线完成关系数据的可视化与探索分析任务。还可一键导出 SDK，集成到业务系统中，帮助开发者研发提效。

G6VP 所导出的 SDK 正是基于 Graphin 封装的，如果你想了解 Graphin 的能力，不妨可以在 G6VP 这款产品中一窥究竟

✨ 功能特性

🎨 高颜值元素，规范的样式配置。

Graphin 对于图元素的视觉映射做了规范化处理。一个 Graphin 内置节点包含：容器，标签，光晕，图标，徽标 5 部分，每一部分均可以通过数据驱动。内置的边包含：路径，标签，光晕 3 部分，同时针对业务中常用的标签背景，自环，多边，虚线等，也有响应的数据样式配置。在线体验

📦 自动布局，轻松应对复杂场景

Graphin 内置 10 款网图布局，4 款树图布局，满足你对于不同数据类型，不同分析场景的布局需求。针对复杂业务场景下的布局切换，动态布局，子图布局等，均能通过数据驱动布局，轻松实现。在线体验

📝 细腻的交互，轻松自定义

Graphin 提供了 13 种交互组件。包括画布的缩放，平移，圈选，拉索，自动 Resize，也包括元素的拖拽，选中，悬停，高亮，展开收起等，满足你对于不同分析场景的交互需求。在线体验

🚀 丰富的组件，源于业务沉淀

目前 Graphin 提供了 7 种分析组件：分别为右键菜单，提示框，小地图，工具栏，鱼眼放大镜，轮廓，图例。未来将提供 17+ 的分析组件。在线体验

⚙️ 舒心的开发体验，符合 React 用户心智

🖥 浏览器支持

• Graphin 图标 使用了 Proxy，在一些不支持 Proxy 语法的浏览器上可能无法正确显示字体图标
• Graphin 绘制引擎为 G6，依赖浏览器 API，暂不支持 SSR。

IE / Edge	Firefox	Chrome	Safari
IE11, Edge	last 2 versions	last 2 versions	last 2 versions

📦 安装

如果你是使用 React 的 Web 开发者，那么你大可将 Graphin 当作一个普通的 React 组件来使用。

本文采用 yarn 安装依赖，使用 npm 也可以。以下分别安装 Graphin 的核心组件@antv/graphin 和 分析组件@antv/graphin-components，以及 Graphin 官方提供的图标库@antv/graphin-icons

yarn add @antv/graphin@latest --save
yarn add @antv/graphin-components@latest --save
yarn add @antv/graphin-icons --save

🔨 使用

使用 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, { Components, Utils } from '@antv/graphin';
const { MiniMap } = Components;
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 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} />;
};

👨‍💻 升级指南

如果你是从 Graphin1.x 的用户，这份升级指南可能会帮助你，遇到升级问题，也可以在 github 上提 issue

⌨️ 开发指南

如果你想在本地启动 Graphin，不妨看这份贡献指南。我们希望有更多的小伙伴一起参与 Graphin 的开源建设

更多信息

• Graphin 简介
• 快速上手
• 图可视分析解决方案