使用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){
isDrag = false;
timmerHandle = setTimeout(setDragTrue,200);
});
myChart.on("mouseup", function (param){
if (!isDrag){
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: {
x: 'left',
data: $scope.webkitDep.categories.map(function (a) {
return a.name;
})
},
series: [{
type: 'graph',
layout: 'force',
label: {
normal: {
show:true,
position: 'right',
formatter: function(params){
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,
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){
isDrag = false;
timmerHandle = setTimeout(setDragTrue,200);
});
myChart.on("mouseup", function (param){
if (!isDrag){
clearTimeout(timmerHandle);
console.log("mouse up.");
isClick = true;
}else{
isDrag = false;
console.log("draging over.");
isClick = false;
}
});
function setDragTrue() {
isDrag = true;
}
}
}
});
大佬们又更好的办法请不吝赐教!
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)