Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tohsaka888/react-knowledge-graph

next.js with framer-motion create knowledge graph
https://github.com/tohsaka888/react-knowledge-graph

knowledge-graph nextjs reactjs

Last synced: 9 days ago
JSON representation

next.js with framer-motion create knowledge graph

Awesome Lists containing this project

README

        

# React-Knowledge-Graph

English | [简体中文](/README_zh.md)

[![CodeFactor](https://www.codefactor.io/repository/github/tohsaka888/react-knowledge-graph/badge?style=flat-square)](https://www.codefactor.io/repository/github/tohsaka888/react-knowledge-graph)
[![GitHub Release Date](https://img.shields.io/github/release-date/tohsaka888/react-knowledge-graph.svg?style=flat-square)](https://github.com/tohsaka888/react-knowledge-graph/releases)
[![npm package](https://img.shields.io/npm/v/react-knowledge-graph.svg?style=flat-square)](https://www.npmjs.org/package/react-knowledge-graph)
[![NPM downloads](http://img.shields.io/npm/dm/react-knowledge-graph.svg?style=flat-square)](https://npmjs.org/package/react-knowledge-graph)
[![GitHub license](https://img.shields.io/github/license/mashape/apistatus.svg?style=flat-square)](https://github.com/tohsaka888/react-knowledge-graph/blob/master/LICENSE)
[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)

## Introduction

a react component that can help you create a dynamic knowledge-graph built with `Next.js`.

## Features

- Customize node size/color/text color/text size
- Canvas drag and drop support
- Support asynchronous data acquisition / dynamic exploration to generate graphs
- Support for highlighting nodes and their associated edges when Hovering nodes
- Customize properties by node type
- Option to hide edges when Hover edge is supported
- Hide explored nodes and edges when explored nodes are clicked
- Reset Canvas
- Fullscreen
- Right click to center the current entity
- Support server-side rendering
- Download the chart as a multi-format image (jpg, jpeg, png, bmp)
- Support drag and drop nodes
- Right-click entity menu adds only the current node i.e. its children/relationships
- Right-click menu display all nodes
- Dynamic configuration
- Configuration flying line effect
- Click the highlights of the same type of node highlight
- Node Menu
- display help memu
- Display the current node information button: You can judge whether you need it according to the needs of your own project, such as: knowledge card function
- Show the increase node to the physical button: you can determine whether it is required according to the needs of your own project, for example: the current node is added to the knowledge application
- two way to optimize dragging performance: use `react` or use `dom`
- and so on
## Accepted data structures

### Nodes

```typescript
type NodeProps = {
id: string;
name: string; // 节点名称
type: string; // 节点类型
hasMore: boolean; // 是否有子节点
direction: "root" | "inside" | "outside";
};
```

### Edges

```typescript
type EdgeProps = {
id: string; // 边id
fromId: string;
toId: string;
description: string;
};
```

### Explore Function

> Need to accept an asynchronous function, this library will return the parameter `id - Node Id`, `node - current node`
> Need to return `inside` in edge node, `outside` out edge node, `edge` array of edges

```typescript
type explore = (id: React.Key) => Promise<{
inside: Node.NodeProps[];
outside: Node.NodeProps[];
edge: Edge.EdgeProps[];
}>;
```

## install

```bash
npm install react-knowledge-graph
# or
yarn add react-knowledge-graph
```

## Usage

import style files in the top file:

```tsx
import "react-knowledge-graph/KnowledgeGraph/index.css";
```

Next:

```tsx
{
message.info("已经到尾节点了!");
}}
edgeConfig={{
hoveredColor: "#e27272",
stroke: "#DEDEDE",
strokeWidth: 1,
}}
typeConfig={{
根节点: {
radius: 20,
fill: "#747ba6",
hoverStyle: {
fill: "#3949a3",
},
},
model: {
radius: 15,
fill: "#b4e5a2",
typeSize: 8,
nameSize: 8,
hoverStyle: {
fill: "#6be73e",
},
},
data: {
radius: 15,
fill: "#ea52ea",
typeSize: 8,
nameSize: 8,
hoverStyle: {
fill: "#e5a2e5",
},
},
test: {
radius: 13,
fill: "#89c4fb",
typeSize: 8,
nameSize: 8,
hoverStyle: {
fill: "#2f8fe8",
},
},
}}
/>
```

### Demo

[click to show the Demo](https://react-knowledge-graph.vercel.app/)