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