svg展示设计方案

svg展示设计方案
1、设计目的
1)能支持GEF编辑器和浏览器展示
2)数据请求方式为基于web网络服务器的rest接口
3)支持任意自由度的svg编辑:浏览器编辑,GEF编辑,手动编辑svg文件
4)报表分析
5)支持树形
6)支持表格
7)未来可以分布式部署
8)每个svg图元都有自己绑定的业务属性数据。

2、 数据格式
将展示数据与业务数据分开存储,先生成svg。因为需要分布式部署,所以采用数据存储而不是存储在磁盘。
故普展示数据存储为svg:
1、存储简单,无论在GEF或者浏览器都可展示无冲突。
2、展示数据很少变化,整体存储更好,比存储元数据后再组装生成svg更简洁。
3、可以根据浏览器插件直接对svg进行变更。
缺陷:做不到差量更新

业务数据存储为json:
1、json存储上更加简洁,高效,直观。
2、表设计上可以直接存储具有层级关系的json和类似传统的表主外键设计相结合。
4、表字段可以任意定义以及变更,更加符合属性不定的情况。

3、数据的可视化方案
业务数据报表分析存储为json:
1、可以采用d3.js等插件将json格式的业务数据转为可视化的报表数据。

4、 数据库用postgresql。原因:
1、支持jsonb格式存储。
2、对nosql的支持。在json对象差量更新上会有优势。

数据库设计
图元属性业务数据格式一般如下,$为变量:
{
“at1”:”$at1”,
“at2”:”$at2”,
“2”:{
“$key1”:”$value1”,
“$key2”:”$value2”,
……
“$keyn”:”$valuen”
},
“3”:{
[“$key1”:”$value1”],
[“$key2”:”$value2”],
……
[“$keyn”:”$valuen”]
}
}

将设计成如下表:
------------------------------------------------------------
id:varchar(10) | type:varchar(1) | json:json
------------------------------------------------------------

1 1 {
“at1”:”$at1”,
“at2”:”$at2”
}
------------------------------------------------------------
1 2 {
“$key1”:”$value1”,
“$key2”:”$value2”,
……
“$keyn”:”$valuen”

}

------------------------------------------------------------
1 3 {
[“$key1”:”$value1”],
[“$key2”:”$value2”],
……
[“$keyn”:”$valuen”]
}

------------------------------------------------------------
5、接口划分
1、图形数据接口:获取图形展示数据
2、业务数据接口:根据图形点击事件获取相关业务数据
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值