知识图谱之可视化(三)

最新推荐文章于 2024-01-09 01:15:09 发布

原创

最新推荐文章于 2024-01-09 01:15:09 发布 · 5.3k 阅读

27 ·

CC 4.0 BY-SA版权

文章标签：

#知识图谱 #可视化 #ECharts

才疏学浅，欢迎批评指正

使用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 =