用jquery写个人物关系网

Question

数据库建好了，现在不会用jquery写页面，求代码

Answer 1

人家都已经写好了，你加个参数，改个参数就可以了呀。
{name:"成龙",img:'头像的图片地址',friend:[
                {name:"房祖名",img:'头像的图片地址',relationship:"父子"},
                {name:"林凤娇",img:'头像的图片地址',relationship:"夫妻"},
                {name:"吴绮莉",img:'头像的图片地址',relationship:"绯闻"},
                {name:"徐静蕾",img:'头像的图片地址',relationship:"激吻"}]
        },
var host ="<span class='host'>"+array[n].name+"</span>";
改为
var host ="<img class='host' src='"+array[n].img+"'>";guests+="<span class='guest'>"+array[n].friend[i].name+"</span>";
改为：
guests+="<img class='guest' src='"+array[n].friend[i].name+"'>";

Answer 2

Lz，你这是纯粹的伸手党了。改的方法告诉你了，虽然不是全对，但也应该对你的思路有启发才是
1:relationName中按上面说的，每个人都加上个img去存储头像
2:将下面代码中的<img src='1.gif' style='width:30px;height:30px'/>1.gif用relationName中的img属性值去替换它
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){//传入参数1：数组 参数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' title='"+array[n].name+"'>"+array[n].name+"<img src='1.gif' style='width:30px;height:30px'/></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' title='"+array[n].friend[i].name+"'>"+array[n].friend[i].name+"<img src='1.gif' style='width:30px;height:30px'/></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代表共几个对象 r代表周长 i代表第几个对象 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).attr('title');
                var guest = $(".guest").attr('title');
                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 =className=='relationship'?"<span class='relationship'>"+this.array[i].friend[j][name]+"</span>":"<span class='"+className+"' title='"+this.array[i].friend[j][name]+"'>"+this.array[i].friend[j][name]+"<img src='1.gif' style='width:30px;height:30px'/></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)
})

Answer 3

大哥们！请问怎样在这些关系之间加线，连接啊，我是个菜鸟，刚接触jquery！求解啊！！

Answer 4

ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发（1） - Jquery/Jquery Mobile - IT工作生活这点事。Just Such So!
http://www.suchso.com/Jquery-JqueryMobile/echarts-jiaochegn-forcechart-tuozhai-gundongtiao-click-tip1.html

Answer 5

ECharts教程--基于力导向布局图功能更完善的人物关系图插件扩展开发 - Jquery/Jquery Mobile - IT工作生活这点事。Just Such So!
http://www.suchso.com/jquery-jquerymobile/echarts-jiaochegn-forcechart-tuozhai-gundongtiao-click-tip.html