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
------------------------------------------------------------
11{
“at1”:”$at1”,
“at2”:”$at2”
}
------------------------------------------------------------
12{
“$key1”:”$value1”,
“$key2”:”$value2”,
……
“$keyn”:”$valuen”
}
------------------------------------------------------------
13{
[“$key1”:”$value1”],
[“$key2”:”$value2”],
……
[“$keyn”:”$valuen”]
}
------------------------------------------------------------
5、接口划分
1、图形数据接口：获取图形展示数据
2、业务数据接口：根据图形点击事件获取相关业务数据