http://www.cnblogs.com/xiaogangqq123/archive/2011/04/22/2025068.html
http://kzvyg10d.iteye.com/blog/1574297
http://www.shaoqun.com/a/7827.aspx
http://hi.baidu.com/drnadmhzfnacefe/item/758bc35b4d5eed3495eb058a
http://www.nwoods.com/components/canvas/gojs-samples.htm
http://data.yule.sohu.com/star/data/1/1062/
http://slodive.com/web-development/html5-canvas-demos-and-applications/
http://en.inforapid.org/
http://tweezy.net.au/twzERD.html
http://www.1stwebdesigner.com/design/creative-ways-use-html5-canvas/
http://renlifang.msra.cn/guanximap.aspx?q=%E5%A7%9A%E6%98%8E
C:\Program Files\Java\jdk1.6.0_10\demo\applets\GraphLayout
C:\Program Files\Java\jdk1.6.0_10\demo\applets\GraphLayout\example1.html
有源代码
http://www.iteye.com/topic/178003
Jquery的一个例子
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq实现人物<a href='http://www.logtu.net/html/2669.html'
target='_blank'><u>结构</u></a>关系图的动态<a
href='http://www.logtu.net/html/2660.html' target='_blank'><u>显示</u></a>效果
by www.logtu.net
</title>
<style>
#box {
width: 500px;
height: 500px;
position: relative
}
.host {
position: absolute;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: #000000;
background-color: #eeeeee;
border: #000000 1px solid;
font-weight: bolder
}
.guest {
position: absolute;
width: 80px;
height: 40px;
line-height: 40px;
text-align: center;
color: #999999;
background-color: #FFFFFF;
border: #000000 1px solid;
cursor: pointer
}
.relationship {
position: absolute;
width: 60px;
height: 20px;
color: #aaa;
line-height: 20px;
font-size: 12px;
text-align: center
}
</style>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script>
var relationName = [ {
name : "成龙",
friend : [ {
name : "房祖名",
relationship : "父子"
}, {
name : "林凤娇",
relationship : "夫妻"
}, {
name : "吴绮莉",
relationship : "绯闻"
}, {
name : "徐静蕾",
relationship : "激吻"
} ]
}, {
name : "房祖名",
friend : [ {
name : "成龙",
relationship : "父子"
}, {
name : "林凤娇",
relationship : "母子"
}, {
name : "方大同",
relationship : "情敌"
}, {
name : "薛凯琪",
relationship : "女友"
}, {
name : "陈坤",
relationship : "朋友"
}, {
name : "赵薇",
relationship : "朋友"
} ]
}, {
name : "林凤娇",
friend : [ {
name : "成龙",
relationship : "夫妻"
}, {
name : "房祖名",
relationship : "母子"
}, {
name : "吴绮莉",
relationship : "情敌"
} ]
}, {
name : "吴绮莉",
friend : [ {
name : "成龙",
relationship : "绯闻"
}, {
name : "林凤娇",
relationship : "情敌"
}, {
name : "吴卓林",
relationship : "母女"
} ]
}, {
name : "徐静蕾",
friend : [ {
name : "李亚鹏",
relationship : "电影"
}, {
name : "韩寒",
relationship : "娱乐圈"
}, {
name : "成龙",
relationship : "激吻"
}, {
name : "黄立行",
relationship : "电影"
} ]
}, {
name : "方大同",
friend : [ {
name : "房祖名",
relationship : "情敌"
}, {
name : "薛凯琪",
relationship : "否认拍拖"
}, {
name : "林宥嘉",
relationship : "歌手"
}, {
name : "韩庚",
relationship : "演唱会"
} ]
}, {
name : "薛凯琪",
friend : [ {
name : "方大同",
relationship : "否认拍拖"
}, {
name : "房祖名",
relationship : "女友"
} ]
} ];
var relation = {
radius : 150,
boxW : 500,
boxH : 500,
hostW : 100,
hostH : 50,
guestW : 80,
guestH : 40,
relationW : 60,
relationH : 20,
angle : 0,
id : "box",
init : function(array, n) {//传入<a href='http://www.logtu.net/html/2636.html' target='_blank'><u>参数</u></a>1：数组 <a href='http://www.logtu.net/html/2636.html' target='_blank'><u>参数</u></a>2：第几个
this.array = array;
this.appendHost(this.array, n);
this.appendQuest(this.array, n);
this.appendRelationShip(this.array, n);
},
appendHost : function(array, n) {
var box = $("#" + this.id);
var host = "<span class='host'>" + array[n].name + "</span>";
box.append(host);
this.postHost();
},
postHost : function() {
var x = (this.boxW - this.hostW) / 2;
var y = (this.boxH - this.hostH) / 2;
$(".host").css({
left : x,
top : y
});
},
appendQuest : function(array, n) {
var box = $("#" + this.id);
var guests = "";
var that = this;
for ( var i = 0; i < array[n].friend.length; i++) {
guests += "<span class='guest'>" + array[n].friend[i].name
+ "</span>";
}
$(guests).appendTo(box);
$(".guest").live("click", function() {
that.move(that, this);
});
this.postQuest();
},
postQuest : function() {
var guests = $(".guest");
var that = this;
guests.each(function(i) {
guests.eq(i)
.css(
{
left : that.setQuestPose(guests.length,
that.radius, i, that.guestW,
that.guestH, that.angle).left,
top : that.setQuestPose(guests.length,
that.radius, i, that.guestW,
that.guestH, that.angle).top
}).attr("angle", i / guests.length)
});
},
setQuestPose : function(n, r, i, w, h, d) {//n:代表共几个<a href='http://www.logtu.net/div_css/2518.html' target='_blank'><u>对象</u></a> r代表周长 i代表第几个<a href='http://www.logtu.net/div_css/2518.html' target='_blank'><u>对象</u></a> w代表外面对象的宽带 h代表外面对象的高度 d代表其实角度
var p = i / n * Math.PI * 2 + Math.PI * 2 * d;
var x = r * Math.cos(p);
var y = r * Math.sin(p);
return {
"left" : parseInt(this.boxW / 2 + x - w / 2),
"top" : parseInt(this.boxH / 2 + y - h / 2)
};
},
appendRelationShip : function(array, n) {
var box = $("#" + this.id);
var relation = "";
for ( var i = 0; i < array[n].friend.length; i++) {
relation += "<span class='relationship'>"
+ array[n].friend[i].relationship + "</span>";
}
box.append(relation);
this.postRelationShip();
},
postRelationShip : function() {
var guests = $(".relationship");
var that = this;
guests.each(function(i) {
guests.eq(i).css(
{
left : that.setQuestPose(guests.length,
that.radius / 2, i, that.relationW,
that.relationH, that.angle).left,
top : that.setQuestPose(guests.length,
that.radius / 2, i, that.relationW,
that.relationH, that.angle).top
});
});
},
move : function(t, i) {
var n = $(".guest").index($(i));
this.angle = parseFloat($(i).attr("angle")) + 0.5;
this.delect(n);
this.moveHost(i);
this.moveQuest(i);
this.moveRelationship(i);
this.changeClass();
setTimeout(function() {
t.newAppend(i);
}, 500);
},
newAppend : function(i) {
this.newAppendGuest(i, "guest", "name", this.guestW, this.guestH,
this.radius);
this.newAppendGuest(i, "relationship", "relationship",
this.relationW, this.relationH, this.radius / 2);
},
newAppendGuest : function(i, className, name, w, h, r) {
var host = $(i).html();
var guest = $(".guest").html();
var box = $("#" + this.id);
var that = this;
var next = 0;
for ( var i = 0; i < this.array.length; i++) {
if (host == this.array[i].name) {
for ( var j = 0; j < this.array[i].friend.length; j++) {
if (guest !== this.array[i].friend[j].name) {
next++;
var guests = "<span class='"+className+"'>"
+ this.array[i].friend[j][name] + "</span>";
$(guests).appendTo(box).css(
{
left : that.setQuestPose(
this.array[i].friend.length, r,
next, w, h, that.angle).left,
top : that.setQuestPose(
this.array[i].friend.length, r,
next, w, h, that.angle).top
}).attr(
"angle",
that.angle + next
/ this.array[i].friend.length)
.hide().fadeIn(1000);
}
}
}
}
},
moveHost : function(i) {
var hLeft = parseInt($(".host").css("left")) + this.hostW / 2;
var hTop = parseInt($(".host").css("top")) + this.hostH / 2;
var gLeft = parseInt($(i).css("left")) + this.guestW / 2;
var gTop = parseInt($(i).css("top")) + this.guestH / 2;
var l = gLeft - hLeft;
var t = gTop - hTop;
var left = (hLeft - l - this.guestW / 2) + "px";
var top = (hTop - t - this.guestH / 2) + "px";
this.animate(".host", left, top);
},
moveRelationship : function(i) {
var hLeft = parseInt($(".host").css("left")) + this.hostW / 2;
;
var hTop = parseInt($(".host").css("top")) + this.hostH / 2;
var gLeft = parseInt($(".relationship").css("left"))
+ this.relationW / 2;
var gTop = parseInt($(".relationship").css("top")) + this.relationH
/ 2;
var l = gLeft - hLeft;
var t = gTop - hTop;
var left = (hLeft - l - this.relationW / 2) + "px";
var top = (hTop - t - this.relationH / 2) + "px";
this.animate(".relationship", left, top);
},
moveQuest : function(i) {
var left = $(".host").css("left");
var top = $(".host").css("top");
this.animate(i, left, top);
},
delect : function(n) {
$(".guest").slice(0, n).remove();
$(".guest").slice(1).remove();
$(".relationship").slice(0, n).remove();
$(".relationship").slice(1).remove();
},
animate : function(i, left, top) {
$(i).animate({
left : left,
top : top
}, 500);
},
changeClass : function() {
var that = this;
$(".guest").addClass("abcdef").removeClass("guest");
$(".host").addClass("guest").removeClass("host").attr("angle",
that.angle);
$(".abcdef").addClass("host").removeClass("abcdef").attr("angle",
null);
}
};
$(document).ready(function() {
//relation.init(relationName, 0);
$.ajax({
type : "post",
url : "/adminTool/AdministratorTool/getRalation.do",
data : generatePara('',''),
timeout: 5000,
dataType:'json',
success : function(resultData, status, xhr) {
result = resultData;
alert(resultData);
},
error : function(xhr, status, error) {},
async:false
});
});
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
