JS-SVG练习之关系图

最新推荐文章于 2025-05-28 15:28:28 发布

原创

最新推荐文章于 2025-05-28 15:28:28 发布 · 4.5k 阅读

0 ·

CC 4.0 BY-SA版权

这个项目展示了如何使用SVG和JavaScript来创建关系图。通过SPRING、STRUTS和MYBATIS处理后台数据，然后在前端显示。关系图的特点包括：客户用圆表示，关系用直线表示，圆的大小和直线的粗细根据交易数量动态调整。提供JS接口paint(data, enableShowLines, enableStrongLines)，用于绘制和交互。这是一个初级JS练习，旨在帮助初学者掌握数据可视化技巧。" 113757611,8054642,自定义OAuth2 Token服务：刷新与生成新Token,"['OAuth2', 'Spring Security', 'Token管理', '安全']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

下载地址：

http://download.youkuaiyun.com/detail/hai8902882/6526455

其中包含2个项目：

datavisual：关系图项目

采用SPRING STRUTS MYBATIS三大框架简单利用，将数据在后台处理后，再传到前台显示。

randomRelationsData：随即生成客户交易数据

随即生成数据格式如下：

A142 C44 92300 (客户A142 向客户C44 打帐92300元)
CAC BC 35900
B23 EBE2 60800

某XX中想要了解客户间的交易情况，将数据图形化展现，即展现关系图(将来的大数据可视化)。

描述如下：
1、每个客户用圆表示，客户间关系使用直线表示；
2、某客户与之相关系的客户越多，即该客户的圆半径越大，反之；
3、两客户间的交易总数越大，即直线越粗，反之；
4、鼠标放在圆上，即显示该客户的交易详情，信息包括客户ID、关联客户总数、

出账总金额、入账总金额；
5、点击圆，即出账、入账交易动态动画展示；

JS接口说明：
function paint(data, enableShowLines, enableStrongLines);

data: 客户交易数据
enableShowLines: 是否显示所有的关系，即是否显示所有直线

enableStrongLines: 当鼠标在圆上时，是否使该客户的关系直线加粗

做法：

自己写了个

注意：
为了熟悉JS等作为练习的，希望对新手有一定的帮助。