java+数据库+D3.js 实时查询人物关系图
先看下 效果
某个用户，邀请了自己的朋友 ，自己的朋友邀请了其他朋友，1 展示邀请关系，2 点击头像显示邀请人和被邀请人的关系。（网上这种资料很少， 另外很多都是从JSON文件取 数据， 这里是从数据库取数据）
=================================================================================================需求：Java从数据库查用户表，管理平台可以实时查看每个月用户的邀请关系图。
以下是代码：
1.Java 方法
1.1 controller 根据某个手机号码查出JSON
/** * @param model * @param mobile * @return */ @RequestMapping(value = "/relation") public ModelAndView toRelation(Model model,@RequestParam("mobile")String mobile) { String userName= AuthUtils.getAuthenticationObject().getName(); Customer user =userService.getUserByname(userName); model.addAttribute("role", user.getRole()); model.addAttribute("username", user.getMobile()); JSONObject json = customerService.findUserRelation(mobile); model.addAttribute("json", json); System.out.println(json); return new ModelAndView("relation"); }
1.2 service 方法（递归查询，JSON处理）
/** * 根据手机号码查询人物关系图 * @param mobile * @return */ public JSONObject findUserRelation(String mobile) { JSONObject json = new JSONObject(); // 首先查询当前用户 Customer customer = userService.getUserByname(mobile); List<RelationBo> list = new ArrayList<RelationBo>(); // 根节点，只看子类 // 递归获取当前用户的所有子类。 list = getAllRelation(new ArrayList<RelationBo>(), customer.getUid()); list.add(0, new RelationBo(mobile,Constants.TOP_USER, customer.getUid(), null)); // 获取用户信息JSONArray JSONArray peopleArray = new JSONArray(); JSONArray targetArray = new JSONArray(); SourceTargetBo bo = null; JSONObject peoJ= null; List<String> photoList= RelationUtil.getRandomPhoto(); for (int i = 0; i < list.size(); i++) { peoJ=new JSONObject(); peoJ.put("name", list.get(i).getName()); // peoJ.put("image", list.get(i).getImage()); peoJ.put("image", photoList.get(i)); peopleArray.add(peoJ); for (int j = 0; j < list.size(); j++) { if(list.get(j).getPuid()==null||list.get(j).getPuid()==list.get(i).getUid()){ continue; } if (list.get(i).getUid().equals(list.get(j).getPuid())) { bo = new SourceTargetBo(i, j,"resolved",RelationUtil.getRelation()); // 找到子类序号 targetArray.add(bo); } } } // 人物JSON json.put("nodes", peopleArray); // 关系JSON json.put("edges", targetArray); return json; } private List<RelationBo> getAllRelation(List<RelationBo> bo, String uid) { // 查询这个用户下的所有子用户 List<Customer> list = customerDao.findAllChild(uid); RelationBo relation = null; if (list == null || list.size() == 0) { // 当前用户没有子用户了！ return bo; } else { for (Customer cus : list) { relation = new RelationBo(cus.getMobile(), Constants.BOOTOM_USER, cus.getUid(), cus.getPuid()); // 所有子用户添加到树中 bo.add(relation); // 递归查询子用户的所有子用户 bo = getAllRelation(bo, cus.getUid()); } } return bo; }
1.3 mybatis
<select id="findAllChild" resultType="com.ycmedia.entity.Customer"> select * from r_user where puid=#{uid} </select>
1.4 数据库 因为数据库暂时没有用户头像，所以随机工具类定义了几个头像
1.5 工具类， 获得随机关系， 用户头像
package com.ycmedia.utils; import java.util.ArrayList; import java.util.List; import java.util.Random; public class RelationUtil { public static String getRelation(){ List<String> list = new ArrayList<String>(); list.add(""); list.add("亲人"); list.add("同学"); list.add("朋友"); list.add("同事"); list.add("邻居"); int Num=new Random().nextInt(4)+1; return list.get(Num); } public static List<String> getRandomPhoto(){ List<String> list = new ArrayList<String>(); list.add("http://apps.ycmedia.cn/qm/img/31f96dc747eb4e4383ab7f990afc9775.jpg"); list.add("http://appdemo.b0.upaiyun.com/qm/img/lable/60x60/1480730644618.jpg"); list.add("http://appdemo.b0.upaiyun.com/qm/img/lable/60x60/1480730825975.jpg"); list.add("http://appdemo.b0.upaiyun.com/qm/img/lable/60x60/1480730901129.jpg"); list.add("http://appdemo.b0.upaiyun.com/qm/img/lable/60x60/1480730947894.jpg"); return list; } }
1.7 最后的JSON格式
=========================以上是Java， 下面是 html
2.1 html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>邀请关系图</title> <style> .nodetext { font-size: 12px ; font-family: SimSun; fill:#000000; } .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; } </style> </head> <body> <input type="hidden" th:value="${json}" id="json" /> <script src="/bootstrap/jQuery/jquery-2.2.3.min.js"></script> <script src="/js/d3.v3.min.js" charset="utf-8"></script> <script> var obj=$("#json").val(); var root = JSON.parse(obj); var width = 1200; var height = 1200; var img_w = 77; var img_h = 90; var svg = d3.select("body").append("svg:svg") .attr("width", width) .attr("height", height); 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 path = 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 + ")"; }); //控制图片 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(){ 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; }); path.attr("d", function(d) { var dx = 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; }); }); </script> </body> </html>
以上就是全部代码， 目前未实现箭头，昨天搞了好长时间， 没弄出来， Java的画图工具不行， 太丑， 现在D3Js 很火，这里做个参考
