relation-graph

v2.2.8

relation-graph，Vue 关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。Vue component for relationship graph , which can display knowledge graphs, such as organization graph, equity structure graph, group relationship graph, etc. For more information about how to use this package see README

Latest version published 21 days ago

License: MIT

NPM

GitHub

Package Health Score

73 / 100

security
No known security issues
popularity
Small
maintenance
Healthy
community
Sustainable

Explore Similar Packages

Security

No known security issues

All security vulnerabilities belong to production dependencies of direct and indirect packages.

Security and license risk for significant versions

All Versions

Version				Vulnerabilities	License Risk
2.2.8	\|	10/2024	Popular	0 C 0 H 0 M 0 L	0 H 0 M 0 L
2.1.42	\|	04/2024		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.1.0	\|	11/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L
1.0.9	\|	11/2020		0 C 0 H 0 M 0 L	0 H 0 M 0 L

License

MIT

Security Policy

Is your project affected by vulnerabilities?

Scan your projects for vulnerabilities. Fix quickly with automated fixes. Get started with Snyk for free.

Get started free

Popularity

Small

Weekly Downloads (1,035)

GitHub Stars: 1.91K
Forks: 491
Contributors: 8

Direct Usage Popularity

The npm package relation-graph receives a total of 1,035 downloads a week. As such, we scored relation-graph popularity level to be Small.

Based on project statistics from the GitHub repository for the npm package relation-graph, we found that it has been starred 1,914 times.

Downloads are calculated as moving averages for a period of the last 12 months, excluding weekends and known missing data points.

Community

Sustainable

Readme.md: Yes
Contributing.md: No
Code of Conduct: No
Contributors: 8
Funding: No

This project has seen only 10 or less contributors.

We found a way for you to contribute to the project! Looks like relation-graph is missing a Code of Conduct.

Embed Package Health Score Badge

Maintenance

Healthy

Commit Frequency

Open Issues: 15
Open PR: 0
Last Release: 21 days ago
Last Commit: 2 months ago

Further analysis of the maintenance status of relation-graph based on released npm versions cadence, the repository activity, and other data points determined that its maintenance is Healthy.

We found that relation-graph demonstrates a positive version release cadence with at least one new version released in the past 3 months.

As a healthy sign for on-going project maintenance, we found that the GitHub repository had at least 1 pull request or issue interacted with by the community.

Keep your project healthy

Check your package.json

Ensure all the packages you're using are healthy and well-maintained

Snyk Vulnerability Scanner

Get health score & security insights directly in your IDE

Package

Node.js Compatibility: not defined

Age: 4 years
Dependencies: 2 Direct
Versions: 104
Install Size: 2.34 MB
Dist-tags: 1
# of Files: 47
Maintainers: 1
TS Typings: No

relation-graph has more than a single and default latest tag published for the npm package. This means, there may be other tags available for this package, such as next to indicate future releases, or stable to indicate stable releases.

Readme

relation-graph

relation-graph 是支持Vue2、Vue3、React的关系数据展示组件，支持通过【插槽】让使用者使用"普通HTML元素、Vue组件、React组件"来完全自定义图形元素，并提供实用的API接口让使用者轻松构建可交互的图形应用。
除了典型的关系数据展示功能，relation-graph还支持作为一个画板来使用，你可以在画板上放置任何内容，只需要为想要连接的元素设置id，同时定义"元素连线（Element Lines）"即可。轻松实现一个可任意创建连线、可缩放与拖动、支持通过API轻松实现动态交互的画板。
relation-graph is a relationship data display component that supports Vue 2, Vue 3, and React. It enables users to fully customize graphical elements using "common HTML elements, Vue components, React components" through slots, and provides practical API interfaces to facilitate the development of interactive graphical applications."
In addition to the typical relationship data display functionality, the relation-graph also supports being used as a drawing board. You can place any content on the drawing board, simply by setting an id for the elements you want to connect, and defining "element lines." This allows for the easy creation of a drawing board that supports the creation of arbitrary connections, zooming and dragging, and dynamic interactions through the API.

Docs & Examples 文档 & 示例：

https://relation-graph.com （国内用户，无需科学上网）
https://relation-graph.github.io（For regions outside of China）

上面的网站中包含使用文档、在线示例，以及可视化的配置工具。
The website above includes documentation, online demos, and a visual configuration tool for software developers.

Getting Started 快速使用：

npm install --save relation-graph

# 注意：relation-graph支持Vue2、Vue3、React, 引入的包名称都是"relation-graph" 但在使用时，根据你的环境，需要引入不同的名称
# Note: relation-graph supports Vue2, Vue3, React, but the package name for import is always "relation-graph".
# 
# Vue2： import RelationGraph from 'relation-graph'
# Vue3： import RelationGraph from 'relation-graph/vue3'
# React： import RelationGraph from 'relation-graph/react'

<template>
  <div>
    <div style="height:calc(100vh - 60px);">
      
    </div>
  </div>
</template>

Sample code effects 上面代码的效果：

简单示例效果图

Example Projects 完整的示例代码：

The complete Vue2 sample project: / Vue3完整小示例:
https://github.com/seeksdream/relation-graph-vue3-demo
The complete Vue3 sample project: / React完整小示例:
https://github.com/seeksdream/relation-graph-react-demo
The complete React sample project: / vue2完整小示例:
https://github.com/seeksdream/relation-graph-vue2-demo

More Examples 更多示例：

https://relation-graph.com/#/demo （国内用户，无需科学上网）
https://relation-graph.github.io/#/demo（For regions outside of China）

relation-graph

center-层级距离设置力学布局(force) 节点筛选关系筛选节点/连线点击效果2 展开/收缩时动画效果布局切换事件

The complete sample project 完整的、可运行的示例项目：

The complete Vue2 sample project & vue2完整小示例：
https://github.com/seeksdream/relation-graph-vue2-demo
The complete Vue3 sample project & vue3完整小示例：
https://github.com/seeksdream/relation-graph-vue3-demo
The complete React sample project & React完整小示例：
https://github.com/seeksdream/relation-graph-react-demo

More info 更多效果及使用方法：

https://relation-graph.com （国内用户，无需科学上网）
https://relation-graph.github.io（For regions outside of China）

Contact me 与我联系：

我的QQ：3235808353
My WhatsApp:

relation-graph dependencies

html2canvas screenfull

relation-graph development dependencies

@types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-prettier eslint-config-standard eslint-plugin-eslint-plugin eslint-plugin-import eslint-plugin-node eslint-plugin-prettier eslint-plugin-promise eslint-plugin-react eslint-plugin-standard eslint-plugin-vue prettier typescript vue-eslint-parser yaml-eslint-parser

FAQs

What is relation-graph?

relation-graph，Vue 关联关系图谱组件，可以展示如组织机构图谱、股权架构图谱、集团关系图谱等知识图谱，可提供多种图谱布局，包括树状布局、中心布局、力学布局自动布局等。Vue component for relationsh... Visit Snyk Advisor to see a full health score report for relation-graph, including popularity, security, maintenance & community analysis.

Is relation-graph popular?

The npm package relation-graph receives a total of 1,035 weekly downloads. As such, relation-graph popularity was classified as small. Visit the popularity section on Snyk Advisor to see the full health analysis.

Is relation-graph well maintained?

We found that relation-graph demonstrated a healthy version release cadence and project activity. It has a community of 8 open source contributors collaborating on the project. See the full package health analysis to learn more about the package maintenance status.

Is relation-graph safe to use?

The npm package relation-graph was scanned for known vulnerabilities and missing license, and no issues were found. Thus the package was deemed as safe to use. See the full health analysis review.

Last updated on 17 November-2024, at 04:33 (UTC).

Build a secure application checklist

Select a recommended open source package

Minimize your risk by selecting secure & well maintained open source packages

DONE

Scan your app for vulnerabilities

Scan your application to find vulnerabilities in your: source code, open source dependencies, containers and configuration files

SCAN NOW

Fix identified vulnerabilities

Easily fix your code by leveraging automatically generated PRs

AUTO FIX

Monitor for new issues

New vulnerabilities are discovered every day. Get notified if your application is affected

MONITOR APP

Package Health Score

Explore Similar Packages

Security and license risk for significant versions

Is your project affected by vulnerabilities?

Weekly Downloads (1,035)

Direct Usage Popularity

Embed Package Health Score Badge

Commit Frequency

Keep your project healthy

Check your package.json

Snyk Vulnerability Scanner

Readme

relation-graph

Docs & Examples 文档 & 示例：

Getting Started 快速使用：

Sample code effects 上面代码的效果：

Example Projects 完整的示例代码：

More Examples 更多示例：

The complete sample project 完整的、可运行的示例项目：

More info 更多效果及使用方法：

Contact me 与我联系：

relation-graph dependencies

relation-graph development dependencies

FAQs

What is relation-graph?

Is relation-graph popular?

Is relation-graph well maintained?

Is relation-graph safe to use?

Build a secure application checklist

Select a recommended open source package

Scan your app for vulnerabilities

Source Code

Open Source

Container

Config

Fix identified vulnerabilities

Monitor for new issues