jquery关系图,jquery流程图

用什么语言 可以制作人物关系图 比如js 或者jquery 人物的名称 和关系 是从数据库中读出的

首先如果是远程数据库处理要后台脚本去访问取数据，比如php,java之类，传到前端。

成都创新互联公司成立于2013年，先为浑源等服务建站，浑源等地企业，进行企业商务咨询服务。为浑源企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。

前端可以使用js来将数据显示成图表，使用jqplot等组件也可以。

求教，有没有js插件或者jquery插件可以实现微博的社交关系图的

图表插件，能做出类似的，但如果要完全一样，估计有难度。 比较好点的图表插件有HighCharts和FusionCharts，还有一些其它的，你可以自己搜一下。都很好用的，只要看一下它们的api，就可以用几行代码加上一些配置，写出一些实用的图表了。

jQuery内部原理和实现方式浅析

这段时间在学习研究jQuery源码，受益于jQuery日益发展强大，研究jQuery的大牛越来越多，学习的资料也比前两年好找了，有很多非常不错的资源，如高云的jQuery1.6.1源码分析系列。这些教程非常细致的分析了jQuery内部原理和实现方式，对学习和理解jQuery有非常大的帮助。但是个人认为很多教程对jQuery的整体结果把握不足，本人试图从整体来阐述一下jQuery的内部实现。

大家知道，调用jQuery有两种方式，一种是高级的实现，通过传递一个参数实现DOM选择，如通过$(“h1″)选择所有的h1元素，第二种是较为低级的实现，如果通过$.ajax实现ajax的操作。那么，这两种方式到底有何不同？用typeof函数检测$(‘h1′)和$.ajax,类型分别为object和function，稍微学过jQuery的都知道或者听过过，前者返回的是一个jQuery对象，那么jQuery对象是什么，它和jQuery是什么关系呢？我们先来通过for(var

i

in

$(”))

document.write(i+”

:::”+$(“”)[i]+””);打印一下jQuery对象的属性和对应的值,可以看到它有100多个属性，通过console输入$(“*”)可以看到大部分属性是继承自jQuery原型的属性，jQuery对象实际上是这样一个对象:

所以我们来推测，jQuery的实现可能是类似这样的：

function

jQuery(){

this[0]="Some

DOM

Element";

this[1]="Some

DOM

Element";

this[2]="Some

DOM

Element";

this.length=3;

this.prevObject="Some

Object";

this.context="Some

Object";

this.selector="Some

selector";

}

jQuery.prototype={

get:function(){},

each:function(){},

......

}

这些代码通过new操作符就就能创建出拥有上述属性的jQuery对象,但是实际上我们调用jQuery创建jQuery对象时并没有使用new操作符，这是如何实现的呢？来看jQuery的实现:

var

jQuery

=

function(

selector,

context

)

{

//

The

jQuery

object

is

actually

just

the

init

constructor

'enhanced'

return

new

jQuery.fn.init(

selector,

context,

rootjQuery

);

}

jQuery.fn=jQuery.prototype={

jquery:

core_version,

init:function(selector,context){

//some

code

return

this;

}

//some

code

there

//......

}

jQuery.fn.init.prototype=jQuery.fn;

这里有几点做得非常巧妙的地方,第一点是通过jQuery原型属性的init方法来创建对象来达到不用new创建对象的目的，第二点是对init方法内this指向的处理。我们知道，通过调用init返回一个jQuery的实例，那么这个实例就必须要继承jQuery.prototype的属性，那么init里面这个this,

就继承jQuery.prototype的属性。但是init里面的this，受制于作用域的限制，并不能访问jQuery.prototype其它的属性，jQuery通过一句'jQuery.fn.init.prototype=jQuery.fn'把它的原型指向jQuery.fn,这样以来，init产生的jQuery对象就拥有了jQuery.fn的属性。

到这里，一个jQuery的基本原型就浮出水面了。这里有两个对象，一个是jQuery这个构造函数，另外一个是这个构造函数产生的对象(我们称之为jQuery对象，它和普通对象没有什么区别),

如下关系图:

可以看到jQuery构造函数和jQuery.prototype均有各自的属性和方法，两者的调用方法各不一样,这两个对象都有一个extend方法，都是用来扩展自身的属性和方法，在jQuery内部，extend的实现实际是靠一样的代码,

将在后面的源码分析中做以详细的分析。

jquery怎么实现关系图的绘制

实例代码如下：

!DOCTYPE html

head

titlejQuery渐显效果的人物多级关系图/title

meta http-equiv="content-type" content="text/html;charset=gb2312"

style type="text/css"

#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=""/script

script type="text/javascript"

var relationName = [

{name:"成龙",friend:[

{name:"房祖名",relationship:"父子"},

{name:"林凤娇",relationship:"夫妻"},

},

{name:"房祖名",friend:[

{name:"成龙",relationship:"父子"},

{name:"林凤娇",relationship:"母子"},

},

{name:"林凤娇",friend:[

{name:"成龙",relationship:"夫妻"},

{name:"房祖名",relationship:"母子"},

},

{name:"吴绮莉",friend:[

{name:"成龙",relationship:"绯闻"},

{name:"林凤娇",relationship:"情敌"},

},

{name:"徐静蕾",friend:[

{name:"李亚鹏",relationship:"电影"},

{name:"韩寒",relationship:"娱乐圈"},

},

{name:"方大同",friend:[

{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){//传入参数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'"+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; iarray[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代表共几个对象 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; iarray[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; ithis.array.length; i++){

if(host == this.array[i].name){

for(var j=0;jthis.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)

})

/script

/head

body

看不到效果，刷新一下就可以了；br

div id="box"/div

/body

/html