知识图谱之可视化(四)

才疏学浅，欢迎批评指正

使用ECharts实现知识图谱检索结果的可视化

点击图谱上的节点，查询节点上的数据内容，并对当前图谱进行扩展

var sourcejsonArr_Arr = [{"三峡枢纽水库;水库;00030": "三峡枢纽水库"}]
var RelArr_Arr = [["流入", "属于"]]
var targetjsonArr_Arr = [{"长江;河流;000S": "长江", "三峡水电站;水电站;000026":"三峡水电站"}]
echarts.graph = function(id, sourcejsonArr_Arr, RelArr_Arr, targetjsonArr_Arr) {
    var KGGraph = echarts.init(document.getElementById(id));
    var size = 50; //节点大小
    var RG_listdata = []; //节点数组
    var RG_links = []; //链接数组
    var RG_legendes = ["类型1", "类型2", "类型3", "类型4", "类型5", "类型6", "类型7","类型8"];
    var RG_texts = []; //链接数组

    var myChart_KGRGGraph = echarts.init(document.getElementById(id));
    var timmerHandle = null;
    var isDrag = false;
    var isClick = false;
    var single_KGRGRraph_option = {
        title: {
            text: "水利知识图谱",
            top: "top",
            left: "left",
            textStyle: {
                color: '#000000'
            }
        },
        tooltip: {
            formatter: '{b}'
        },
        toolbox: {
            show: true,
            feature: {
                restore: {
                    show: true
                },
                magicType: {
                    show: true,
                    type: ['force', 'chord']
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        backgroundColor: '#f7f7f7',
        animationDuration: 2000,
        animationEasingUpdate: 'quinticInOut',
        series: [{
            name: '知识图谱',
            type: 'graph',
            layout: 'force',
            force: {
                repulsion: 100,
                gravity: 0.01,
                edgeLength: 110,
                layoutAnimation: true,
            },
            data: RG_listdata,
            links: RG_links,
            categories: RG_texts,
            roam: true,
            nodeScaleRatio: 0, //鼠标漫游缩放时节点的相应缩放比例，当设为0时节点不随着鼠标的缩放而缩放
            focusNodeAdjacency: false, //是否在鼠标移到节点上的时候突出显示节点以及节点的边和邻接节点。
            lineStyle: {
                normal: {
                    opacity: 0.5,
                    width: 1.5,
                    curveness: 0
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    textStyle: { //标签的字体样式
                        color: '#000000' //字体颜色
                    },
                    formatter: function(params) {
                        return params.data.showName //此处为label转换 并转换颜色
                    },
                    fontSize: 18,
                    fontStyle: '600',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                    formatter: "{c}"
                }
            }
        }],
        color: ['#60C0DD', '#FE8463', '#9BCA63', '#FAD860', '#F3A43B',
            '#D7504B', '#C6E579', '#F0805A', '#26C0C0', '3cb371'
        ]
    };
    KGGraph .on("click", function(param) {
        setTimeout(function() {
            if (isClick && param.dataType == "node") { //点击线是不能搜索的，因此判断触发点击事件的数据是否是节点
                var frontkeyword = single_KGRGRraph_option.series[0].data[param.dataIndex].showName;
                var backkeyword = single_KGRGRraph_option.series[0].data[param.dataIndex].name;
                console.log(frontkeyword);
                console.log(backkeyword);
                keyWord = frontkeyword;
                // KGRGQueryNext(backkeyword);  查询新节点
            }
        }, 500);
    });
    KGGraph .on("mousedown", function(param) {
        //因为mouseDownFun每次都会调用的，在这里重新初始化这个变量
        isDrag = false;
        //延迟100ms
        timmerHandle = setTimeout(setDragTrue, 200);
    });
    KGGraph .on("mouseup", function(param) {
        if (!isDrag) {
            //先把doMouseDownTimmer清除，不然200毫秒后setGragTrue方法还是会被调用的
            clearTimeout(timmerHandle);
            // console.log("mouse up.");
            isClick = true;
        } else {
            isDrag = false;
            // console.log("draging over.");
            isClick = false;
        }
    });

    function setDragTrue() {
        isDrag = true;
    }

    //绘制点线
    var i = 0;
    KGRGQuery.setData(sourcejsonArr_Arr[0], i);
    for (var key3 in targetjsonArr_Arr) {
        i = i + 1;
        KGRGQuery.setData(targetjsonArr_Arr[key3], i);
    }

    for (var key4 in targetjsonArr_Arr) {
        KGRGQuery.setLinkData(sourcejsonArr_Arr[key4], RelArr_Arr[key4], targetjsonArr_Arr[key4]);
    }
    myChart_KGRGGraph.setOption(single_KGRGRraph_option);
    //置空数组
    RG_listdata = [];
    RG_links = [];
    RG_texts = [];
}
           

查询三峡枢纽水库，效果如下：

点击三峡水电站，搜索三峡水电站，并对当前图谱进行扩展，效果如下：