博客

使用echarts的力导向图做了一个知识图谱，要求点击节点的时候，把节点的数据作为关键词搜索。知识图谱，以前没做过，也不知道用什么好，百度了一下看到有人说用echarts可以做，然后就用了echarts，后来发现，拖拽节点也会触发点击事件。不知道怎么实现echarts拖拽的时候不触发点击事件，就用了这种办法。

先放一个javascript中区分鼠标单击和拖动事件的链接：

http://blog.csdn.net/aitangyong/article/details/41006877

var timmerHandle = null;  
var isDrag = false;  
var isClick = false;
myChart.on("click", function (param){               
    setTimeout(function(){
        if(isClick && param.dataType == "node"){
            console.log("点击了节点");
        }
    },500);
});
myChart.on("mousedown", function (param){   
    //因为mouseDownFun每次都会调用的，在这里重新初始化这个变量  
    isDrag = false;  
    //延迟100ms  
    timmerHandle = setTimeout(setDragTrue,200);  
});
myChart.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;  
}  

以下是完整代码：

<div id="map" mapping-charts webkit-dep="webkitDep"></div>

Module.directive("mappingCharts",function(){
    return {
        restrict:'ACE',
        scope:false,
        template:'<div style="height:600px;" webkit-dep="webkitDep"></div>',
        replace:false,
        link:function($scope,element,attrs,controller){
            var myChart = echarts.init(element.find('div')[0]);
            var webkitDep = attrs.webkitDep;
            var option;
            var timmerHandle = null;  
            var isDrag = false;  
            var isClick = false;
            $scope.$watch(webkitDep, function(v){
                if(v){
                    option = {  
                        legend: {  
                            // data: ['人物关系']//此处的数据必须和关系网类别中name相对应  
                            x: 'left',//图例位置
                            //图例的名称，这里返回短名称，即不包含第一个，当然你也可以包含第一个，这样就可以在图例中选择主干人物
                            data: $scope.webkitDep.categories.map(function (a) {
                                    return a.name;
                                })
                        },  
                        series: [{  
                            type: 'graph',  
                            layout: 'force',  
                            // animation: false,  
                            label: {  
                                normal: {  
                                    show:true,  
                                    position: 'right',
                                    //回调函数，你期望节点标签上显示什么
                                    formatter: function(params){
                                        // return params.name;
                                        var newParamsName = "";
                                        var paramsNameNumber = params.name.length;
                                        var provideNumber = 6;
                                        var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                        if (paramsNameNumber > provideNumber) {
                                            for (var p = 0; p < rowNumber; p++) {
                                                var tempStr = "";
                                                var start = p * provideNumber;
                                                var end = start + provideNumber;
                                                if (p == rowNumber - 1) {
                                                    tempStr = params.name.substring(start, paramsNameNumber);
                                                } else {
                                                    if(p > 0){
                                                        tempStr = params.name.substring(start, end-1) + "...";
                                                        newParamsName += tempStr;
                                                        break;
                                                    }else{
                                                        tempStr = params.name.substring(start, end) + "\n";
                                                    }
                                                }
                                                newParamsName += tempStr;
                                            }

                                        } else {
                                            newParamsName = params.name;
                                        }
                                        return newParamsName
                                    },
                                }  
                            },
                            draggable: true,
                            data: $scope.webkitDep.nodes.map(function (node, idx) {  
                                node.id = idx;  
                                return node;  
                            }),  
                            categories: $scope.webkitDep.categories,  
                            force: {  
                                gravity:0.03,
                                layoutAnimation:true,
                                // xAxisIndex : 0, //x轴坐标 有多种坐标系轴坐标选项
                                // yAxisIndex : 0, //y轴坐标
                                edgeLength: 55,//连线的长度  
                                repulsion: 150  //子节点之间的间距  
                            },  
                            symbolSize:20,  
                            edges: $scope.webkitDep.links  
                        }]   
                    };  
                    myChart.setOption(option); 
                }
            });
            myChart.on("click", function (param){               
                setTimeout(function(){
                    if(isClick && param.dataType == "node"){//点击线是不能搜索的，因此判断触发点击事件的数据是否是节点
                        $("input[name=keyword]").val(option.series[0].data[param.dataIndex].name);
                        $rootScope.goSearchPage();
                    }
                },500);
            });
            myChart.on("mousedown", function (param){   
                //因为mouseDownFun每次都会调用的，在这里重新初始化这个变量  
                isDrag = false;  
                //延迟100ms  
                timmerHandle = setTimeout(setDragTrue,200);  
            });
            myChart.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;  
            }  
        }
    }
});

大佬们又更好的办法请不吝赐教！