知识图谱之可视化(三)

才疏学浅，欢迎批评指正

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

点击知识图谱中的节点，将节点的数据作为关键字进行搜索

   var timmerHandle = null;
   var isDrag = false;
   var isClick = false;
   KGGraph.on("click", function(param) {
        setTimeout(function() {
            if (isClick && param.dataType == "node") { //点击线是不能搜索的，因此判断触发点击事件的数据是否是节点
                newkeyword = option.series[0].data[param.dataIndex].showName;
                console.log(newkeyword);
                // KGRGQuery.KGRGQueryNext(newkeyword);  //重新搜索
            }
        }, 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;
        }
    });

完整代码

echarts.graph = function(id) {
    var KGGraph = echarts.init(document.getElementById(id));
    var size = 50; //节点大小
    var listdata = []; //节点数组
    var links = []; //链接数组
    var legendes = ["对象属性", "关联对象", "所属类别", "对象"];
    var texts = []; //链接数组

    var legendes_json = {
        对象属性: "对象属性",
        关联对象: "关联对象",
        所属类别: "所属类别",
        对象: "对象"
    };

    var property_cat_json = {
        对象属性: "对象属性",
        工程建设情况: "在建",
        工程规模: "大型",
        建成时间: "2011/10/01",
        归口管理部门: "xx部门",
        水电站代码: "6000026",
        水电站所在位置: "湖北省-宜昌市",
        水电站类型: "xx式水电站",
    };

    var property_cat = ["对象属性", "在建", "大型", "2011/10/01", "xx部门", "6000026", "湖北省-宜昌市", "xx式水电站"]
    var property_rel_cat = ["对象属性", "工程建设情况", "工程规模", "建成时间", "管理部门", "水电站代码", "水电站所在位置", "水电站类型"]
    var rel_obj_cat_json = {
        "关联对象": "关联对象",
        "位于,重庆至宜昌": "长江重庆",
        "属于，三峡枢纽水库": "三峡枢纽水库",
        "所在,宜宾至宜昌": "宜宾至宜昌"
    };
    var rel_obj_cat = ["关联对象", "宜宾至宜昌", "重庆至宜昌区间", "三峡枢纽水库"];
    var rel_obj_rel_cat = ["关联对象", "位于", "属于", "所在"]
    var cat_name_cat_json = {
        所属类别: "所属类别",
        AD: "AD",
        BAS: "BAS",
        HYST: "HYST",
        RES: "RES",
        WIUN: "WIUN",
        WRZ: "WRZ"
    }
    var cat_name_cat = ["所属类别", "AD", "WIUN", "RES", "BAS", "WRZ", "HYST"]

    var obj_name_cat_json = {
        对象: "三峡水电站"
    }
    var obj_name_cat = ["三峡水电站"]


    function setData(json, n) {
        var i = 0;
        for (var p in json) {
            listdata.push({
                x: i * 50,
                y: size + i * 10,
                "name": p,
                "showName": json[p],
                "symbolSize": size,
                "category": n,
                "draggable": "true",
                formatter: function(params) {
                    return params.data.showName
                }
            });
            i++;
        }
    }

    function setLinkData(json, relarr, title) {
        if (relarr !== "") {
            var i = 0;
            for (var p in json) {
                links.push({
                    "source": p,
                    "target": title,
                    "value": relarr[i],
                    lineStyle: {
                        normal: {
                            // text: relarr[i],
                            color: 'source'
                        }
                    }
                });
                i++;
            }
        } else {
            for (var p2 in json) {
                links.push({
                    "source": p2,
                    "target": title,
                    "value": "",
                    lineStyle: {
                        normal: {
                            color: 'source'
                        }
                    }
                });
            }
        }
    }

    for (var i = 0; i < legendes.length; i++) {
        texts.push({
            "name": legendes[i]
        })
    }

    setData(property_cat_json, 0);
    setData(rel_obj_cat_json, 1);
    setData(cat_name_cat_json, 2);
    setData(obj_name_cat_json, 3);

    setLinkData(property_cat_json, property_rel_cat, property_cat[0]);
    setLinkData(rel_obj_cat_json, rel_obj_rel_cat, rel_obj_cat[0]);
    setLinkData(cat_name_cat_json, "", cat_name_cat[0]);
    setLinkData(legendes_json, "", legendes[3]);

    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',
        legend: {
            data: legendes,
            textStyle: {
                color: '#000000'
            },
            icon: 'circle',
            type: 'scroll',
            orient: 'vertical',
            left: 10,
            top: 20,
            bottom: 20,
            itemWidth: 10,
            itemHeight: 10
        },
        animationDuration: 1000,
        animationEasingUpdate: 'quinticInOut',
        series: [{
            name: '知识图谱',
            type: 'graph',
            layout: 'force',
            force: {
                repulsion: 200,
                gravity: 0.02,
                edgeLength: 90,
                layoutAnimation: true,
            },
            data: listdata,
            links: links,
            categories: 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', //字体颜色
                        fontWeight: 'normal', //'normal'标准'bold'粗的'bolder'更粗的'lighter'更细的或100 | 200 | 300 | 400...
                        fontSize: "12" //字体大小
                    },
                    formatter: function(params) {
                        return params.data.showName //此处为label转换 并转换颜色
                    },
                    fontSize: 18,
                    fontStyle: '600',
                }
            },
            edgeLabel: {
                normal: {
                    show: true,
                    textStyle: {
                        fontSize: 12
                    },
                    formatter: "{c}"
                }
            }
        }],
        color: ['#ff7f50', '#6dadd1', '#9765a8', '#91c7ae', '#772cdc',
            '#ff69b4', '#ba55d3', '#cd5c5c', '#ffa500', '#40e0d0',
            '#1e90ff', '#ff6347', '#7b68ee', '#00fa9a', '#ffd700',
            '#6b8e23', '#ff00ff', '#3cb371', '#b8860b', '#30e0e0'
        ] //自定义调色板
    };
    KGGraph.on("click", function(param) {
        setTimeout(function() {
            if (isClick && param.dataType == "node") { //点击线是不能搜索的，因此判断触发点击事件的数据是否是节点
                newkeyword = option.series[0].data[param.dataIndex].showName;
                console.log(newkeyword);
                // $rootScope.goSearchPage(newkeyword); //  重新搜索
            }
        }, 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;
        }
    });
    KGGraph.setOption(option);
    //置空数组
    listdata = [];
    links = [];
    texts = [];
}

效果如下：

点击三峡枢纽水库节点，搜索三峡枢纽水库，效果如下

参考文献
[1]https://blog.csdn.net/qq_28259083/article/details/79413757