人民的名义 d3 人物关系图

还是不剧透了.
最近《人民的名义》电视剧火了。但您真的看懂《人民的名义》了吗？银行行长的老公是市委书记；公安厅厅长的老师是政法委书记；反贪局长的爹老检察长；反贪处长的妈是退休处长、姨夫是省政法委书记；反贪局局长的老师是省政法委书记。
只有一个“农民的儿子”开局不到两小时就被K.O.了。跟人民有啥关系！…… 所以这部剧不该叫《人民的名义》，应该叫《王者荣耀》

<html> <head> <meta charset="utf-8"> <title>人物关系图</title> </head> <style> .nodetext { font-size: 12px ; font-family: SimSun; fill:#000000; } .linetext { font-size: 12px ; font-family: SimSun; fill:#0000FF; fill-opacity:0.0; } </style> <body> <script src="http://cdn.bootcss.com/d3/3.5.17/d3.js"></script> <script type="text/javascript"> var _json = { "nodes":[ { "name": "侯亮平" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9729.jpg" }, { "name": "李达康" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9731.jpg" }, { "name": "沙瑞金" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9730.jpg" }, { "name": "高育良" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9732.jpg" }, { "name": "祈同伟" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9733.jpg" }, { "name": "陆亦可" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9734.jpg" }, { "name": "钟小艾" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9797.jpg" }, { "name": "高小琴" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9738.jpg" }, { "name": "吴惠芬" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9739.jpg" }, { "name": "欧阳菁" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9736.jpg" }, { "name": "赵瑞龙" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9743.jpg" }, { "name": "郑西坡" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9744.jpg" }, { "name": "赵东来" , "image" : "http://entpic.yue365.com/tv/juese/1/710/9742.jpg" } ], "edges":[ { "source": 0 , "target": 1 , "relation":"互相欣赏" }, { "source": 0 , "target": 2 , "relation":"上司" }, { "source": 0 , "target": 3 , "relation":"老师" }, { "source": 1 , "target": 2 , "relation":"上司" }, { "source": 1 , "target": 3 , "relation":"对手" }, { "source": 2 , "target": 3 , "relation":"上司" }, { "source": 0 , "target": 4 , "relation":"父子" }, { "source": 0 , "target": 5 , "relation":"母子" }, { "source": 4 , "target": 5 , "relation":"夫妻" }, { "source": 0 , "target": 6 , "relation":"义兄弟" }, { "source": 4 , "target": 6 , "relation":"同门" }, { "source": 5 , "target": 6 , "relation":"同门" }, { "source": 4 , "target": 7 , "relation":"同门" }, { "source": 5 , "target": 7 , "relation":"同门" }, { "source": 6 , "target": 7 , "relation":"同门" }, { "source": 4 , "target": 8 , "relation":"师徒" }, { "source": 5 , "target": 8 , "relation":"师徒" }, { "source": 6 , "target": 8 , "relation":"师徒" }, { "source": 7 , "target": 8 , "relation":"师徒" }, { "source": 8 , "target": 9 , "relation":"同门" }, { "source": 3 , "target": 9 , "relation":"师徒" }, { "source": 2 , "target": 10 , "relation":"母子" }, { "source": 10 , "target": 11 , "relation":"主臣" }, { "source": 10 , "target": 12 , "relation":"主臣" }, { "source": 11 , "target": 12 , "relation":"同僚" } ] }; var width = 1000; var height = 750; var img_w = 77; var img_h = 90; var svg = d3.select("body").append("svg") .attr("width",width) .attr("height",height); (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","#ccc") .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("image") .attr("width",img_w) .attr("height",img_h) .attr("xlink:href",function(d){ return d.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); 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("x",function(d){ return d.x - img_w/2; }); nodes_img.attr("y",function(d){ return d.y - img_h/2; }); nodes_text.attr("x",function(d){ return d.x }); nodes_text.attr("y",function(d){ return d.y + img_w/2; }); }); })(null,_json); </script> </body> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » 人民的名义 d3 人物关系图