D3.js人物关系图


本文转载于http://blog.csdn.net/lzhlzz/article/details/40450379


力学图(力导向图)与生活中常见的人物关系图结合,是比较有趣的。本文将以此为凭,阐述在力学图中如何插入外部图片和文字。

在【第 9.2 章】中制作了一个最简单的力学图。其后有很多朋友有疑问,主要的问题包括:

  • 如何在小球旁插入文字
  • 如何将小球换为别的图形
  • 如何插入图片
  • 如何限制小球运动的边界

本文将对以上问题依次做出解说。其中前三点是 SVG 元素的问题,和 D3 无多大关联。

1. SVG 图片

SVG 的图片元素的详细解说可看【官方文档-图片】。通常,我们只需要使用到图片元素的五个属性就够了。

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <image xlink:href="image.png" x="200" y="200" width="100" height="100"></image>  

其中:

  • xlink:href - 图片名称或图片网址
  • x - 图片坐上角 x 坐标
  • y - 图片坐上角 y 坐标
  • width - 图片宽度
  • height- 图片高度

在 D3 中插入图片,代码形如:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. svg.selectAll("image")  
  2.     .data(dataset)  
  3.     .enter()  
  4.     .append("image")  
  5.     .attr("x",200)  
  6.     .attr("y",200)  
  7.     .attr("width",100)  
  8.     .attr("height",100)  
  9.     .attr("xlink:href","image.png");  

2. SVG 文本

SVG 的文本元素和图片类似,详细属性见【官方文档-文本】。

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <text x="250" y="150" dx="10" dy="10" font-family="Verdana" font-size="55" fill="blue" >Hello</text>  

其中:

  • x - 文本 x 坐标
  • y - 文本 y 坐标
  • dx- x 轴方向的文本平移量
  • dy- y 轴方向的文本平移量
  • font-family - 字体
  • font-size - 字体大小
  • fill - 字体颜色

在 D3 中插入文本,代码形如:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. svg.selectAll("text")  
  2.     .data(dataset)  
  3.     .enter()  
  4.     .append("text")  
  5.     .attr("x",250)  
  6.     .attr("y",150)  
  7.     .attr("dx",10)  
  8.     .attr("dy",10)  
  9.     .text("Hello");  
 

3. 源文件

接下来制作力学图的源文件,本次将数据写入 JSON 文件中。

呵呵,借用一下【仙剑4】的人物,本人也是个仙剑迷,期待15年7月【仙剑6】的上市。

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. {  
  2. "nodes":[  
  3. { "name": "云天河"   , "image" : "tianhe.png" },  
  4. { "name": "韩菱纱"   , "image" : "lingsha.png" },  
  5. { "name": "柳梦璃"   , "image" : "mengli.png" },  
  6. { "name": "慕容紫英" , "image" : "ziying.png" }  
  7. ],  
  8. "edges":[  
  9. { "source": 0 , "target": 1 , "relation":"挚友" },  
  10. { "source": 0 , "target": 2 , "relation":"挚友" },  
  11. { "source": 0 , "target": 3 , "relation":"挚友" }  
  12. ]  
  13. }  

如上,在 JSON 文件中添加数据,再将图片文件与 JSON 文件放于同一目录下即可(放哪都行,最主要是看程序中是如何实现的)。

4. 力学图

4.1 读入文件

读入 JSON 文件,这点应该很熟了吧。不然可以先看看【第 9.4 章】。

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. d3.json("relation.json",function(error,root){  
  2.               
  3.             if( error ){  
  4.                 return console.log(error);  
  5.             }  
  6.             console.log(root);  
  7. }  

4.2 定义力学图的布局

力学图的 Layout(布局)如下:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var force = d3.layout.force()  
  2.                 .nodes(root.nodes)  
  3.                 .links(root.edges)  
  4.                 .size([width,height])  
  5.                 .linkDistance(200)  
  6.                 .charge(-1500)  
  7.                 .start();  

其中 linkDistance 是结点间的距离, charge 是定义结点间是吸引(值为正)还是互斥(值为负),值越大力越强。

4.3 绘制连接线

绘制结点之间的连接线的代码如下:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var edges_line = svg.selectAll("line")  
  2.                     .data(root.edges)  
  3.                     .enter()  
  4.                     .append("line")  
  5.                     .style("stroke","#ccc")  
  6.                     .style("stroke-width",1);  
  7.                       
  8. var edges_text = svg.selectAll(".linetext")  
  9.                     .data(root.edges)  
  10.                     .enter()  
  11.                     .append("text")  
  12.                     .attr("class","linetext")  
  13.                     .text(function(d){  
  14.                         return d.relation;  
  15.                     });  

其中,第 1 - 6 行:绘制直线 

第 8 - 15 行:绘制直线上的文字

直线上文字的样式为:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. .linetext {  
  2.     font-size: 12px ;  
  3.     font-family: SimSun;  
  4.     fill:#0000FF;  
  5.     fill-opacity:0.0;  
  6. }  

fill-opacity 是透明度,0表示完全透明,1表示完全不透明。这里是0,表示初始状态下不显示。

4.4 绘制结点

绘制结点的图片和文字:

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. var nodes_img = svg.selectAll("image")  
  2.                     .data(root.nodes)  
  3.                     .enter()  
  4.                     .append("image")  
  5.                     .attr("width",img_w)  
  6.                     .attr("height",img_h)  
  7.                     .attr("xlink:href",function(d){  
  8.                         return d.image;  
  9.                     })  
  10.                     .on("mouseover",function(d,i){  
  11.                         d.show = true;  
  12.                     })  
  13.                     .on("mouseout",function(d,i){  
  14.                         d.show = false;  
  15.                     })  
  16.                     .call(force.drag);  
  17.   
  18. var text_dx = -20;  
  19. var text_dy = 20;  
  20.   
  21. var nodes_text = svg.selectAll(".nodetext")  
  22.                     .data(root.nodes)  
  23.                     .enter()  
  24.                     .append("text")  
  25.                     .attr("class","nodetext")  
  26.                     .attr("dx",text_dx)  
  27.                     .attr("dy",text_dy)  
  28.                     .text(function(d){  
  29.                         return d.name;  
  30.                     });  

第 1 - 16 行:绘制图片

第 10 - 15 行:当鼠标移到图片上时,显示与此结点想关联的连接线上的文字。在这里只是对 d.show 进行布尔型赋值,在后面更新时会用到这个值。

第 21 - 30 行:绘制图片下方的文字

4.5 更新

让力学图不断更新,使用 force.on("tick",function(){ }),表示每一步更新都调用 function 函数。

[javascript]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. force.on("tick"function(){  
  2.       
  3.     //限制结点的边界  
  4.     root.nodes.forEach(function(d,i){  
  5.         d.x = d.x - img_w/2 < 0     ? img_w/2 : d.x ;  
  6.         d.x = d.x + img_w/2 > width ? width - img_w/2 : d.x ;  
  7.         d.y = d.y - img_h/2 < 0      ? img_h/2 : d.y ;  
  8.         d.y = d.y + img_h/2 + text_dy > height ? height - img_h/2 - text_dy : d.y ;  
  9.     });  
  10.   
  11.     //更新连接线的位置  
  12.      edges_line.attr("x1",function(d){ return d.source.x; });  
  13.      edges_line.attr("y1",function(d){ return d.source.y; });  
  14.      edges_line.attr("x2",function(d){ return d.target.x; });  
  15.      edges_line.attr("y2",function(d){ return d.target.y; });  
  16.        
  17.      //更新连接线上文字的位置  
  18.      edges_text.attr("x",function(d){ return (d.source.x + d.target.x) / 2 ; });  
  19.      edges_text.attr("y",function(d){ return (d.source.y + d.target.y) / 2 ; });  
  20.        
  21.      //是否绘制连接线上的文字  
  22.      edges_text.style("fill-opacity",function(d){  
  23.         return d.source.show || d.target.show ? 1.0 : 0.0 ;  
  24.      });  
  25.        
  26.      //更新结点图片和文字  
  27.      nodes_img.attr("x",function(d){ return d.x - img_w/2; });  
  28.      nodes_img.attr("y",function(d){ return d.y - img_h/2; });  
  29.        
  30.      nodes_text.attr("x",function(d){ return d.x });  
  31.      nodes_text.attr("y",function(d){ return d.y + img_w/2; });  
  32. });  
 

5. 结果

结果如下:


可点击下面的地址,右键点浏览器查看完整代码:http://www.ourd3js.com/demo/J-2.0/relationforce.html

6. 结束语

在【入门系列】中,疑问最多的是【树状图】,本想先解决这个问题的,但是由于我也有些问题还没想明白,所以先写本文这个较容易的。接下来还将有几篇关于力学图的,树状图的整理要稍微拖一段时间。

谢谢阅读。



  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
d3.js是一个基于数据操作文档的JavaScript库,可以帮助开发者使用HTML、SVG和CSS来展示数据。d3.js可以用来实现人物关系谱,具体实现步骤如下: ```javascript // 引入d3.js库 <script src="https://d3js.org/d3.v3.min.js"></script> // 创建svg元素 var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); // 创建力导向 var force = d3.layout.force() .nodes(nodes) // 节点数组 .links(links) // 连线数组 .size([width, height]) // 画布大小 .linkDistance(150) // 连线长度 .charge(-400); // 节点间的斥力 // 绘制连线 var links = svg.selectAll(".link") .data(links) .enter() .append("line") .attr("class", "link"); // 绘制节点 var nodes = svg.selectAll(".node") .data(nodes) .enter() .append("circle") .attr("class", "node") .attr("r", 20) .style("fill", function(d) { return color(d.group); }) .call(force.drag); // 节点可拖拽 // 绘制节点标签 var labels = svg.selectAll(".label") .data(nodes) .enter() .append("text") .attr("class", "label") .attr("fill", "black") .attr("font-size", "12px") .attr("dx", 20) .attr("dy", 8) .text(function(d) { return d.name; }); // 开始力导向布局 force.start(); // 监听力导向布局事件 force.on("tick", function() { // 更新连线位置 links.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; }); // 更新节点位置 nodes.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); // 更新节点标签位置 labels.attr("x", function(d) { return d.x; }) .attr("y", function(d) { return d.y; }); }); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值