d3.js和mysql_java+数据库+D3.js 实时查询人物关系图

邀请关系图

}.linetext{font-size:12px;font-family:SimSun;fill:#0000FF;fill-opacity:0.0;

}path.link{fill:none;stroke:#666;stroke-width:1.5px;

}marker#licensing{fill:green;

}path.link.licensing{stroke:green;

}path.link.resolved{stroke:green;

}circle{fill:#ccc;stroke:#333;stroke-width:1.5px;

}text{font:10px sans-serif;pointer-events:none;

}text.shadow{stroke:#fff;stroke-width:3px;stroke-opacity:.8;

}

varobj=$("#json").val();varroot=JSON.parse(obj);varwidth= 1200;varheight= 1200;varimg_w= 77;varimg_h= 90;varsvg=d3.select("body").append("svg:svg")

.attr("width", width)

.attr("height", height);varforce=d3.layout.force()

.nodes(root.nodes)

.links(root.edges)

.size([width,height])

.linkDistance(200)

.charge(-1500)

.start();//控制线条

varedges_line=svg.selectAll("line")

.data(root.edges)

.enter()

.append("line")

.style("stroke","#ccc")

.style("stroke-width",1);//控制文字

varedges_text=svg.selectAll(".linetext")

.data(root.edges)

.enter()

.append("text")

.attr("class","linetext")

.text(function(d){returnd.relation;

});varpath=svg.append("svg:g").selectAll("path")

.data(force.links())

.enter().append("svg:path")

.attr("class",function(d) {return "link" +d.type; })

.attr("marker-end",function(d) {return "url(#" +d.type+ ")"; });//控制图片

varnodes_img=svg.selectAll("image")

.data(root.nodes)

.enter()

.append("image")

.attr("width",img_w)

.attr("height",img_h)

.attr("xlink:href",function(d){returnd.image;

})

.on("mouseover",function(d,i){

edges_text.style("fill-opacity",function(edge){if( edge.source===d||edge.target===d ){return 1.0;

}

});

})

.on("mouseout",function(d,i){

edges_text.style("fill-opacity",function(edge){if( edge.source===d||edge.target===d ){return 0.0;

}

});

})

.call(force.drag);vartext_dx= -20;vartext_dy= 20;varnodes_text=svg.selectAll(".nodetext")

.data(root.nodes)

.enter()

.append("text")

.attr("class","nodetext")

.attr("dx",text_dx)

.attr("dy",text_dy)

.text(function(d){returnd.name;

});

force.on("tick",function(){

edges_text.attr("x",function(d){return(d.source.x+d.target.x)/ 2; });

edges_text.attr("y",function(d){return(d.source.y+d.target.y)/ 2; });

nodes_img.attr("x",function(d){returnd.x-img_w/2; });

nodes_img.attr("y",function(d){returnd.y-img_h/2; });

nodes_text.attr("x",function(d){returnd.x });

nodes_text.attr("y",function(d){returnd.y+img_w/2; });

path.attr("d",function(d) {vardx=d.target.x-d.source.x,//增量

dy=d.target.y-d.source.y,

dr=Math.sqrt(dx*dx+dy*dy);return "M" +d.source.x+ ","

+d.source.y+ "A" +dr+ ","

+dr+ "0 0,1" +d.target.x+ ","

+d.target.y;

});

});