GraphVis 图可视化分析组件

GraphVis一款性能优异，效果丰富，使用简单，易于扩展的图数据可视化组件库

http://www.graphvis.cn/

复杂网络分析
http://www.graphvis.cn/graph/complex/index.html
关系网络分析重点
http://www.graphvis.cn/graph/network/index.html
可视化分析应用
http://www.graphvis.cn/apps/index.html

开发文档
http://www.graphvis.cn/graph/dev-doc/index.html

IBM知识图谱构建工具
https://mediacenter.ibm.com/media/%E7%9F%A5%E8%AF%86%E5%9B%BE%E8%B0%B1%E5%8A%A0%E9%80%9F%E5%B9%B3%E5%8F%B0+%28IKE%29/0_0bp1nrhr/98864382





KgDisasterNodeGraphvisinfo


点事件说明
序号    事件    说明
1    click(eventFun)    节点单击事件,如：node.click(function(evt){console.log("click me")});
2    dbclick(eventFun)    节点双击事件 如：node.dbclick(function(evt){console.log("dbclick me")});
3    mousedown(eventFun)    鼠标按下事件 如：node.mousedown(function(evt){console.log("mousedown")});
4    mouseup(eventFun)    鼠标松开事件 如：node.mouseup(function(evt){console.log("mouseup")});
5    mouseover(eventFun)    鼠标进入事件 如：node.mouseover(function(evt){console.log("mouse over")});
6    mouseout(eventFun)    鼠标离开事件 如：node.mouseout(function(evt){console.log("mouseout out")});
7    mousemove(eventFun)    鼠标移动事件 如：node.mousemove(function(evt){console.log("move me")});
8    mousedrag(eventFun)    鼠标拖动事件 如：node.mousedrag(function(evt){console.log("drag me")});

//添加节点A id标识唯一元素，label:节点名称  size:节点大小
const nodeA = visgraph.addNode({id:'A',label:'A点',size:40});
nodeA.fillColor='255,0,0'; //节点颜色，采用rgb
nodeA.fontColor='250,250,250';//节点自体颜色，采用rgb
nodeA.textPosition='Middle_Center';//节点文字位置(居中)
nodeA.shape='star';//节点形状

//当前支持的形状
const nodeShapes=['rect','circle','triangle','star','polygon','text'];

=========================================================================================



连线事件说明
序号    事件    说明
1    click(eventFun)    节点单击事件,如：link.click(function(evt){console.log("click me")});
2    dbclick(eventFun)    节点双击事件 如：link.dbclick(function(evt){console.log("dbclick me")});
3    mousedown(eventFun)    鼠标按下事件 如：link.mousedown(function(evt){console.log("mousedown")});
4    mouseup(eventFun)    鼠标松开事件 如：link.mouseup(function(evt){console.log("mouseup")});

//添加连线，source和target为对应点的id,label为连线的标签
const edgeA = visgraph.addEdge({source:'A',target:'B',label:'关联'});
edgeA.lineType='vdirect'; //连线类型

//当前支持的所有连线类型
const linetypes=['direct','curver','vdirect','vcurver','vlink','hlink','bezier','vbezier','hbezier'];
//随机颜色
==============================================================================================
{"nodes":[{"id":1,"label":"刘备","type":1,"size":60},{"id":2,"label":"关羽","type":2,"size":60},{"id":3,"label":"张飞","type":3,"size":60}],"links":[{"source":1,"target":2,"label":"义弟","weight":1},{"source":1,"target":3,"label":"义弟","weight":1},{"source":2,"target":3,"label":"义兄","weight":1},{"source":3,"target":2,"label":"义弟","weight":1}]}



{
    "nodes": [
        {
            "id": 1,
            "label": "刘备",
            "type": 1,
            "size": 60
        },
        {
            "id": 2,
            "label": "关羽",
            "type": 2,
            "size": 60
        },
        {
            "id": 3,
            "label": "张飞",
            "type": 3,
            "size": 60
        }
    ],
    "links": [
        {
            "source": 1,
            "target": 2,
            "label": "义弟",
            "weight": 1
        },
        {
            "source": 1,
            "target": 3,
            "label": "义弟",
            "weight": 1
        },
        {
            "source": 2,
            "target": 3,
            "label": "义兄",
            "weight": 1
        },
        {
            "source": 3,
            "target": 2,
            "label": "义弟",
            "weight": 1
        }
    ]
}



592d2a168a465c166b06f8029067c306

刘备 1
bb7b583d6e04c6bc74be512256a7f981

关羽 2
1dde5cba3b55b21f2c936e4bb946e869

张飞 3
b5b487fbe4c8edd22735dea553edf155






chain_name

source_name

target_name

    getList() {
      this.loading = true;
      listGraphviLinkinfo(this.queryParams).then(response => {
        this.linkinfoList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    
    
jackson    
https://kucw.github.io/blog/2020/6/java-jackson/
https://attacomsian.com/blog/jackson-convert-json-array-to-from-java-list
https://blog.csdn.net/qq_37936542/article/details/79268402
https://www.tutorialspoint.com/how-to-convert-a-list-to-json-array-using-the-jackson-library-in-java


listGraphvisLink
listGraphvisNode


Monolith