绘图框架（relation-graph、jsPlumb、mxGraph、GoJS、Vis.js）

原创 已于 2023-04-04 11:24:33 修改 · 1.4k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #vue.js

于 2023-04-04 10:59:14 首次发布
文章对比了多个JavaScript绘图框架，如relation-graph、jsPlumb（有社区和收费版）、mxGraph、GoJS和Vis.js。relation-graph支持Vue和React，但缺乏一些高级功能如内置导航器和智能布局。jsPlumb收费版提供更稳定的功能，包括导航器。mxGraph相对jsPlumb更优秀。GoJS是闭源且收费的。Vis.js则是一个强大的开源库，擅长处理动态数据和可视化。

绘图框架

relation-graph

relation-graph支持Vue2、Vue3、React, 但引入的包名称都是relation-graph 网址

jsPlumb

jsPlumb 有社区版跟收费版，下面提到的问题在收费版不一定存在。

不稳定
没有内置导航器(收费版是有这个功能的)
没有智能布局功能
没有做图层管理
没有集成截图功能
画布没有边界自动扩充功能

mxGraph

相较于jsPlumb更好

GoJS

GoJS 是闭源收费

Vis.js

Vis.js是由Almende B.V公司开发的开源项目，基于Canvas绘制web可视化图形图表，简单易用，功能强大。是一个动态的、基于浏览器的可视化库，可处理大量的动态数据并能与这些数据进行交互操作。该项目包含 DataSet、Timeline, 和 Graph（2d和3d）。

Vue使用vis实现拓扑图
专注于技术，分享实战经验，探索技术边界，用代码构建更美的数字世界。
05-10 8207
visjs官方文档visjs示例 1. 安装 npm install vis 2. 封装成组件 <template> <div :id="id" style="width: 100%; height: 100%"></div> </template> <script> import vis from "vis"; let options; export default { data() { return { .
js画图框架--mxgraph--入门
04-16
NULL 博文链接：https://chwshuang.iteye.com/blog/1797168
GoJs 1.8 去水印版
06-14
GoJS 涵盖了非常多的流程图组建，目前是收费版有水印，我把水印去掉了。
【亲测免费】 关系图谱组件 `relation-graph` 教程
最新发布
gitblog_00505的博客
11-15 2050
**relation-graph** 是一款支持 Vue2、Vue3 和 React 的关系数据可视化组件。它允许开发者通过插槽插件使用 HTML、CSS 以及 Vue 或 React 组件自定义图形元素。组件提供了丰富的 API 接口，方便构建交互式的图形应用。除了基础的关系图显示功能外，`relation-graph` 还可以作为画板使用，用户可以在上面自由放置内容，只需指定要连接的元素ID并
9款网页绘图javascript框架
路向何方
04-28 2109
向大家推荐9款很棒的可在网页中绘制图表的JavaScript脚本，这些有趣的JS脚本可以帮助你快速方便的绘制图表（线、面、饼、条…），其中包括jQuery、MooTools、Prototype和一些其它的JavaScript框架。 1.FlotFlot是基于jQuery框架绘制图表的纯Javascript框架。它可在客户端即时绘制并生成各种图形。重要的是它使用简
js画图框架--mxgraph 简介,js画图,js画图开发库
用技术点亮生命，用产品温暖人心，探讨coding真谛，感悟技术精神。
02-19 1368
js画图框架-mxgraph 简介--互动式JavaScript、HTML 5图表类库  我在入门的例子http://chwshuang.iteye.com/blog/1797168中有具体列子，希望大家那回去研究   网站http://www.mxgraph.com/ 1. mxGraph 非常简单     将它作为一个JavaScript链接在你的HTML文件中，你马上拥有最干净...
精选资源
relation-graph图谱移动端适配拖动修复代码
03-18
在IT行业中，关系图谱（Relation Graph）是一种用于表示实体之间复杂关系的可视化工具，尤其在数据挖掘、社交网络分析和知识图谱等领域广泛应用。在移动端，为了提供更好的用户体验，通常需要对图表进行适配，使其...
精选资源
relation-graph-3d-force:关系图3D力
05-16
在JavaScript的世界里，我们可以借助各种库和框架来实现这样的功能。在这个项目中，"npm i"的命令表明我们正在安装一个名为"relation-graph-3d-force"的npm包，这通常是一个包含所有必要功能的库，用于创建和操作3D...
精选资源
基于d3或者relation-graph（vue）图形化展示关系
03-16
在这个场景中，我们将关注如何使用d3.js和relation-graph库在Vue.js框架下实现这样的功能。 首先，d3.js（Data-Driven Documents）是一个强大的JavaScript库，专门用于创建交互式的、基于Web的数据可视化。它提供了...
精选资源
genshin-relation-graph:原神人物关系图
04-04
人参关系图 基于Vue的原神人物关系图
基于relation-graph实现的关系图谱
一个人漫不经心的博客
08-22 1016
近期由于工作需要，需要在项目里实现关系图谱的效果。就先做了一个demo，主要是使用了relation-graph的一个图谱工具。
JavaScript中的图形可视化框架-专业的图形可视化引擎
11-29
一款专业的图形可视化引擎，基于 JavaScript 构建。 具备以下功能： - 丰富的元素：内置丰富的节点与边元素，自由配置，支持自定义； - 可控的交互：内置 10+ 交互行为，支持自定义交互； - 强大的布局：内置了 10+ 常用的图布局，支持自定义布局； - 便捷的组件：优化内置组件功能及性能； - 友好的体验：根据用户需求分层梳理文档，支持 TypeScript 类型推断。
JointJS JavaScript流程图绘制框架解析
12-10
JointJS：JavaScript 流程图绘制框架 最近调研了js画流程图的框架，最后选择了Joint。配合上 dagre 可以画出像模像样的流程图。 JointJS 简介 JointJS 是一个开源前端框架，支持绘制各种各样的流程图、工作流图等。Rappid 是 Joint 的商业版，提供了一些更强的插件。JointJS 的特点有下面几条，摘自官网： 能够实时地渲染上百（或者上千）个元素和连接 支持多种形状（矩形、圆、文本、图像、路径等） 高度事件驱动，用户可自定义任何发生在 paper 下的事件响应 元素间连接简单 可定制的连接和关系图 连接平滑（基于贝塞尔插
js图表框架js图表框架
04-15
js图表框架js图表框架js图表框架js图表框架
web前端图形框架
11-17
web前端工作流图形组件，实现可视化流程配置。
[Qt教程] 第19篇 2D绘图（九）图形视图框架（上）
C/C++软件工程师、嵌入式软件工程师、物联网研发工程师、C/C++讲师、物联网讲师、嵌入式讲师、鸿蒙讲师---欢迎大家一起交流(私信添加博主微信)
11-11 3554
[Qt教程] 第19篇 2D绘图（九）图形视图框架（上） 楼主  发表于 2013-5-4 15:26:20 | 查看: 1798| 回复: 26 图形视图框架（上） 版权声明 导语 在前面讲的基本绘图中，我们可以自己绘制各种图形，并且控制它们。但是，
史无前例的js绘图框架mxgraph
weixin_34037515的博客
04-28 416
半年前，公司项目需要，要在web上绘制大量的复杂图形，并要进行各种复杂的操作，开始考虑了这几种技术，例如svg、flex、applet等等都考虑了。后来都被领导否定了，因为像svg必须在浏览器上安装svg插件，flex图形操作方面还比较弱，applet必须在客户端浏览器上安装虚拟机等等。分析了下，能满足领导这种需求的只有js了，千辛万苦终于找到mxgraph绘图框架，看了...
QT的绘图框架
追赶时代的博客
06-19 716
Qt绘图机制 QGraphicsView QGraphicsScene QGraphicsItem
relation-graph案例
04-11
### relation-graph 示例代码与使用案例 #### Vue 中的 `relation-graph` 使用案例 在 Vue 项目中，可以通过安装并引入 `relation-graph` 组件来实现关系图谱的功能。以下是完整的示例代码： ```javascript <template> <div id="app"> <!-- 将 props 数据传递给 RelationGraph --> <RelationGraph :data="graphData" /> </div> </template> <script> // 引入 relation-graph 组件 import { RelationGraph } from 'relation-graph'; export default { name: 'App', components: { RelationGraph, }, data() { return { graphData: { nodes: [ { id: 'node1', text: 'Node 1' }, { id: 'node2', text: 'Node 2' }, { id: 'node3', text: 'Node 3' }, ], links: [ { from: 'node1', to: 'node2', text: 'Link 1->2' }, { from: 'node2', to: 'node3', text: 'Link 2->3' }, ], }, }; }, }; </script> ``` 上述代码展示了如何定义节点 (`nodes`) 和链接 (`links`) 并将其作为数据绑定到 `RelationGraph` 组件上[^1]。 --- #### React 中的 `relation-graph` 使用案例 对于 React 用户而言，可以按照如下方式集成 `relation-graph`： ```jsx import React, { useState } from 'react'; import RelationGraph from 'relation-graph'; function App() { const [graphData, setGraphData] = useState({ nodes: [ { id: 'nodeA', text: 'Node A' }, { id: 'nodeB', text: 'Node B' }, { id: 'nodeC', text: 'Node C' }, ], links: [ { from: 'nodeA', to: 'nodeB', text: 'Connection AB' }, { from: 'nodeB', to: 'nodeC', text: 'Connection BC' }, ], }); return ( <div style={{ width: '800px', height: '600px' }}> {/* 渲染 RelationGraph */} <RelationGraph {...graphData} /> </div> ); } export default App; ``` 此代码片段通过设置初始状态中的节点和边结构，动态渲染了一个简单的图形界面。 --- #### 参数配置详解 为了更好地利用 `relation-graph` 的功能，开发者可以根据需求调整其参数配置。常见的可调选项包括但不限于以下几类： - **Graph 图谱**: 定义整个图表的基础属性。 - **Node 节点**: 自定义节点样式、大小及交互行为。 - **Link/Line 链接线条**: 控制连线的颜色、粗细以及附加文字。 - **Layout 布局算法**: 支持多种布局模式（如圆形分布、层次化排列），以便优化视觉效果[^2]。 例如，在 Vue 或 React 中可通过扩展传参的方式指定额外的样式规则或事件监听器。 --- #### 实际应用场景举例 基于 `relation-graph` 的灵活性，它适用于多个领域内的复杂网络展示场景，比如社交分析、知识图谱构建或者企业内部流程可视化等。具体来说： - 社交媒体平台可以用该工具描绘用户之间的互动关系； - 科研人员能够借助此类技术呈现论文引用链路； - IT 运维团队则可能用来监控服务器集群间的通信状况[^3]。 这些实际应用均体现了 `relation-graph` 在处理大规模关联数据分析方面的强大能力。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值