Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/tohsaka888/react-knowledge-graph
- Owner: tohsaka888
- License: mit
- Created: 2022-09-30T03:15:04.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-12-19T06:43:34.000Z (11 months ago)
- Last Synced: 2023-12-19T10:17:47.229Z (11 months ago)
- Topics: knowledge-graph, nextjs, reactjs
- Language: TypeScript
- Homepage: https://knowledge-graph-demo.tohsaka888.asia
- Size: 1.47 MB
- Stars: 8
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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/)