14 Star 69 Fork 22

antv / Graphin

Create your Gitee Account
Explore and code with more than 12 million developers,Free private repositories !:)
Sign up
Clone or Download
contribute
Sync branch
Cancel
Notice: Creating folder will generate an empty file .keep, because not support in Git
Loading...
README
MIT

Graphin

A React toolkit for graph analysis based on G6

Version NPM downloads Latest commit

English | 简体中文

🌾 New Products!

2022.06.06, this day coincides with the 4th anniversary of the open source of G6, which is also the traditional Chinese solar term: "Grain in Ear", G6VP, a new product in the direction of graph analysis. Users can complete the visualization, exploration and analysis tasks of relational data online without code development. You can also export the SDK with one click and integrate it into the business system to help developers improve R&D efficiency.

The SDK exported by G6VP is encapsulated based on Graphin. If you want to understand the capabilities of Graphin, you can take a look at the product G6VP

demo2

✨ Features

🎨 Good-looking elements, standardized style configuration

Graphin standardizes the visual mapping of graph elements. A Graphin's built-in node contains 5 parts: keyshape, label, halo, icon, and badges, each part can be driven by data. The built-in edges include three parts: keyshape, label, and halo. There are also corresponding style configurations for commonly used features, such as label backgrounds, self-loops, polygons, and dashed lines, etc. Try it online

node-style edge-style

📦 Automatic layout, easy to handle complex scenarios

Graphin has 10 built-in network graph layouts and 4 tree graph layouts to meet your needs of layout for different data types and different analysis scenarios. For features in complex business scenarios, such as layout switching, dynamic layouts, sub-graph layouts, etc., can be easily realized through data-driven layout. Try it online

node-expand layout-switch

📝 Thoughtful interactions, easy to customize

Graphin provides 13 interactive components, including canvas zooming, panning, brush selection, lasso select , automatic resize, and also element dragging, selection, hovering, highlighting, expanding and collapsing, etc., to meet your interactive needs for different analysis scenarios Try it online

behaviors

🚀 Rich components, derived from precipitation of business development

Currently Graphin provides 7 analysis components: ContextMenu, Tooltip, MiniMap, Toolbar, FishEye, Hull, and Legend. 17+ analysis components will be provided in the future. Try it online components

⚙️ Comfortable development experience, in line with React users' cognition

typescript

🖥 Browser support

  • Graphin icons use Proxy, the font icon may not be displayed correctly on some browsers that do not support Proxy syntax
  • The Graphin rendering engine of Graphin is G6, which relies on the browser API and does not support SSR
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
IE11, Edge last 2 versions last 2 versions last 2 versions

📦 Installation

If you are using React, then you can use Graphin as a normal React component.

It uses yarn to install dependencies in this article, while npm is also fine. The following commands install Graphin's core components @antv/graphin and analysis components @antv/graphin-components, and Graphin's official icon library @antv/graphin-icons

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

🔨 Usage

Use Graphin Core Component

import React from 'react';
import Graphin from '@antv/graphin';
// mock data
const data = Utils.mock(10).circle().graphin();
export default () => {
  return <Graphin data={data} />;
};

Use Graphin Analysis Components

import React from 'react';
import Graphin, { Components, Utils } from '@antv/graphin';
const { MiniMap } = Components;
// mock data
const data = Utils.mock(10).circle().graphin();
export default () => {
  return (
    <Graphin data={data}>
      <MiniMap />
    </Graphin>
  );
};

Use Graphin font icon

import React from 'react';
import Graphin from '@antv/graphin';
// Import icon resource files
import iconLoader from '@antv/graphin-icons';
import '@antv/graphin-icons/dist/index.css';
// mock data
const data = Utils.mock(10).circle().graphin();
// Register in Graphin
const { fontFamily, glyphs } = iconLoader();
const icons = Graphin.registerFontFamily(iconLoader);
// Use icons
data.nodes.forEach(node => {
  node.style = {
    icon: {
      type: 'font', // Specify the icon to be Font type
      fontFamily: fontFamily, // Specify FontFamily
      value: icons.home, // Specify the value of the icon
    },
  };
});
export default () => {
  return <Graphin data={data} />;
};

👨‍💻 Upgrade Guide

If you are a user from Graphin1.x, this Upgrade Guide may help you. If you encounter upgrade problems, you can go to github issue section, and feel free to create issues if it's not already there.

⌨️ Development Guide

If you want to run Graphin locally, you may wish to read this Contribution Guide. We hope more contributors can join our team to make Graphin better together.

More Info

MIT License Copyright (c) 2019 Alipay.inc Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

About

Graphin 取名意为 Graph Insight(图的分析洞察),是一个基于 G6 封装的 React 组件库。简单,高效,开箱即用。它的 Logo 是一个石墨烯(Graphene),意为蕴藏未来的潜力 expand collapse
JavaScript and 4 more languages
MIT
Cancel

Releases

No release

Contributors

All

Activities

Load More
can not load any more
JavaScript
1
https://gitee.com/antv/graphin.git
git@gitee.com:antv/graphin.git
antv
graphin
Graphin
master

Search