图为项目过程中的截图。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Ego Network</title>
<style>
.node {
stroke: #CCCC00;
stroke- 1px;
}
.link {
stroke:#000;
stroke-opacity: 0.5;
}
#tooltip {
position:absolute;
200px;
height:auto;
padding:10px;
background-color: #FFFFFF;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow:4px 4px 10px rgba(0,0,0,0.4);
-moz-box-shadow:4px 4px 10px rgba(0,0,0,0.4);
box-shadow:4px 4px 10px rgba(0,0,0,0.4);
/*pointer-events: none; */
}
#tooltip.hidden {
display:none;
}
#tooltip p{
margin:0;
font-family:"微软雅黑";
font-size:16px;
line-height:20px;
}
#div1{
position:absolute;
margin:0;
400px;
height:auto;
font: "微软雅黑" ;
font-size: 20px;}
</style>
<body>
<div id="div1">
<p>该ego社交网络图中用户和他的关注之间用箭头表示，鼠标左键单击用户节点，会有提示框显示该用户的个人信息，后期我们将在该ego网络上应用圈子发现算法。</p>
</div>
<div id="tooltip" class="hidden">
<p></p>
</div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 1500,
height =800;
var color = d3.scale.category10();
var force = d3.layout.force()
.charge(-120)
.linkDistance(250)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var defs = svg.append("defs");
var arrowMarker = defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","20")
.attr("markerHeight","12")
.attr("viewBox","0 0 12 12")
.attr("refX","6")
.attr("refY","6")
.attr("orient","auto");
var arrow_path = "M-6,2 L2,6 L-6,10 L-2,6 L-6,2";
arrowMarker.append("path")
.attr("d",arrow_path)
.attr("fill","#000");
d3.json("user.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line").attr("marker-end","url(#arrow)")
.attr("class", "link")
.style("stroke-width",1.5);
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", function(d) { return d.group*9;})
.style("fill", function(d) { return color(d.group*4); })
.on("click",function(d){
var xPosition = parseFloat (d3.select (this).attr("cx")) ;
var yPosition = parseFloat (d3.select (this).attr("cy")) ;
d3.select ("#tooltip")
.style ("left", xPosition + "px")
.style ("top", yPosition + "px");
d3.select("#tooltip p").text("昵称："+d.name+",性别："+d.sex+",生日："+d.birth+",所在地："+d.location+",简介："+d.introduction+",标签："+d.tag+",关注数："+d.follownum+",粉丝数："+d.fannum+",微博数："+d.tweetnum+",学习经历："+d.workexp+",工作经历："+d.studyexp+",达人："+d.daren+",认证："+d.verify);
d3.select ("#tooltip") . classed ("hidden", false);
})
.call(force.drag);
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
d3.select("#tooltip").on("click", function(){
d3.select("#tooltip").classed("hidden", true);
});
</script>
</body>
</html>