利用D3做一个人物关系图，如图所示，要实现三个功能：1.怎样让关系直接显示在连线上 2.点击中间人物，弹出其简单介绍信息（弹窗） 3.点击边缘人物，跳转至新的人物关系图..................关键是这些节点的数据是利用json数据存储，以上的操作怎么用json呢
<head>
<meta charset="utf-8">
<title>Force</title>
<style type="text/css">
body {
background-image: url(image/a.jpg);
}
span.highlight {
background-color: yellow
}
#left{
width: 50%;
height: 100%;
float: left;
clear: left;
border: 1px solid gray;
border-radius: 5px;
}
#right{
width: 40%;
height: 100%;
float: right;
clear: right;
text-align: center;
border: 1px solid gray;
border-radius: 5px;
font-size: 30px;
}
}
</style>
</head>
<style>
.nodetext {
font-size: 12px;
font-family: SimSun;
fill: #000000;
}
.linetext {
font-size: 12px;
font-family: SimSun;
fill: red;
fill-opacity: 0.0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var width = 600;
var height = 600;
var img_w = 77;
var img_h = 80;
var radius = 30; //圆形半径
var svg = d3.select("body").append("svg")
.attr("width",width)
.attr("height",height);
d3.json("relation.json",function(error,root){
if( error ){
return console.log(error);
}
console.log(root);
var force = d3.layout.force()
.nodes(root.nodes)
.links(root.edges)
.size([width,height])
.linkDistance(200)
.charge(-1500)
.start();
var edges_line = svg.selectAll("line")
.data(root.edges)
.enter()
.append("line")
.style("stroke","#660066")
.style("stroke-width",1);
var edges_text = svg.selectAll(".linetext")
.data(root.edges)
.enter()
.append("text")
.attr("class","linetext")
.text(function(d){
return d.relation;
});
// 圆形图片节点（人物头像）
var nodes_img = svg.selectAll("image")
.data(root.nodes)
.enter()
.append("circle")
.attr("class", "circleImg")
.attr("r", radius)
.attr("fill", function(d, i){
//创建圆形图片
var defs = svg.append("defs").attr("id", "imgdefs")
var catpattern = defs.append("pattern")
.attr("id", "catpattern" + i)
.attr("height", 1)
.attr("width", 1)
catpattern.append("image")
.attr("x", - (img_w / 2 - radius))
.attr("y", - (img_h / 2 - radius))
.attr("width", img_w)
.attr("height", img_h)
.attr("xlink:href", d.image)
return "url(#catpattern" + i + ")";
})
.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);
var text_dx = -20;
var text_dy = 20;
var nodes_text = svg.selectAll(".nodetext")
.data(root.nodes)
.enter()
.append("text")
.attr("class","nodetext")
.attr("dx",text_dx)
.attr("dy",text_dy)
.text(function(d){
return d.name;
});
force.on("tick", function(){
//限制结点的边界
root.nodes.forEach(function(d,i){
d.x = d.x - img_w/2 < 0 ? img_w/2 : d.x ;
d.x = d.x + img_w/2 > width ? width - img_w/2 : d.x ;
d.y = d.y - img_h/2 < 0 ? img_h/2 : d.y ;
d.y = d.y + img_h/2 + text_dy > height ? height - img_h/2 - text_dy : d.y ;
});
//更新连接线的位置
edges_line.attr("x1",function(d){ return d.source.x; });
edges_line.attr("y1",function(d){ return d.source.y; });
edges_line.attr("x2",function(d){ return d.target.x; });
edges_line.attr("y2",function(d){ return d.target.y; });
//更新连接线上文字的位置
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("cx",function(d){ return d.x });
nodes_img.attr("cy",function(d){ return d.y });
nodes_text.attr("x",function(d){ return d.x });
nodes_text.attr("y",function(d){ return d.y + img_w/2; });
});
});
</script>
</body>
</html>
