个人Ego社交网络关系图

 

 

 

 

 

 

 

 

 

图为项目过程中的截图。

 

 

<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Ego Network</title>
<style>
.node {
stroke: #CCCC00;
stroke-width: 1px;
}

.link {
stroke:#000;
stroke-opacity: 0.5;
}

#tooltip {
position:absolute;
width: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;
width: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>

posted @ 2015-02-04 21:49  随风9  阅读(1142)  评论(0编辑  收藏  举报