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、业务数据接口：根据图形点击事件获取相关业务数据