Skip to content

Latest commit

 

History

History
118 lines (89 loc) · 4.7 KB

README.en-US.md

File metadata and controls

118 lines (89 loc) · 4.7 KB
Raw

English | 简体中文

Graphin

A lighteight React toolkit for graph analysis based on G6.

Version NPM downloads Latest commit

✨ Features

  • 🎨 Lightweight: Avoid excessive encapsulation, strive to keep in sync with G6 capabilities, minimize the introduction of new concepts, with the core code <200 lines.
  • 🎗️ React Style: Comfortable development experience, aligns with the mindset of React users, making it easier to extend components based on React.
  • 🚀 Rich Components: Offers a rich set of components, derived from business experiences, making it faster and easier for users to customize their graph applications.

component

🔨 Installing

You can use graphin as a normal React component, installing it through package managers like NPM or Yarn.

$ npm install @antv/graphin
$ yarn add @antv/graphin

After successful installation, you can import the Graphin component.

import React from 'react';
import { Graphin } from '@antv/graphin';

export function Demo() {
  return (
    <Graphin
      id="my-graphin-demo"
      className="my-graphin-container"
      style={{ width: '100%', height: '100%' }}
      options={{
        data,
        node: {
          style: {
            labelText: (d) => d.id,
          },
          palette: {
            type: 'group',
            field: 'cluster',
          },
        },
        layout: {
          type: 'd3force',
          collide: {
            strength: 0.5,
          },
        },
        behaviors: ['zoom-canvas', 'drag-canvas'],
        animation: true,
      }}
    >
    </Graphin>
    />
  );
}

📖 API Reference

Property Description Type Default
id the id of container div. string -
className the class name of container div. string -
style the style of the container CSSProperties -
options the options for the visualization, say graph.setOptions(options) GraphOptions | null -
onInit Callback for when the graph is initialized, after new Graph(). (graph: G6Graph) => void -
onReady Callback for when the graph is ready, after graph.render(). (graph: G6Graph) => void -
onDestroy Callback for when the graph is destroyed, after graph.destroy(). () => {} -

🗂 Examples

📮 Contributing

  • Issue Reporting: If you encounter any issues with graphin during use, please feel free to submit an issue, along with the minimal sample code that can reproduce the problem.
  • Contribution Guide: Information on how to get involved in the development and contribution to graphin.
  • Ideas Discussion: Discuss your ideas on GitHub Discussions or in the DingTalk group.

📄 License

MIT.