15 Star 54 Fork 11

antv / Graphin

加入 Gitee
与超过 600 万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README.zh-CN.md

Graphin

A React toolkit for graph analysis based on G6

Version NPM downloads Latest commit

简体中文 | English

✨ 功能特性

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

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

node-style edge-style

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

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

node-expand layout-switch

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

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

behaviors

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

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

components

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

typescript

🖥 浏览器支持

  • Graphin 图标 使用了 Proxy,在一些不支持 Proxy 语法的浏览器上可能无法正确显示字体图标
  • Graphin 绘制引擎为 G6,依赖浏览器 API,暂不支持 SSR。
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
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 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>
  );
};

👨‍💻 升级指南

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

⌨️ 开发指南

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

更多信息

钉钉群

钉钉群

点评 ( 4 )

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

简介

Graphin 取名意为 Graph Insight(图的分析洞察),是一个基于 G6 封装的 React 组件库。简单,高效,开箱即用。它的 Logo 是一个石墨烯(Graphene),意为蕴藏未来的潜力 展开 收起
JavaScript 等 5 种语言
MIT
取消

发行版

暂无发行版

Graphin

贡献者

全部

近期动态

加载更多
不能加载更多了
JavaScript
1
https://gitee.com/antv/graphin.git
git@gitee.com:antv/graphin.git
antv
graphin
Graphin
master

搜索帮助