JS-SVG练习之关系图

这个项目展示了如何使用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等作为练习的,希望对新手有一定的帮助。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值