力学图 + 人物关系图

最后更新于:2022-04-01 20:04:26

力学图(力导向图)与生活中常见的人物关系图结合,是比较有趣的。本文将以此为凭,阐述在力学图中如何插入外部图片和文字。 在【[第 9.2 章](http://www.ourd3js.com/wordpress/?p=196)】中制作了一个最简单的力学图。其后有很多朋友有疑问,主要的问题包括: - 如何在小球旁插入文字 - 如何将小球换为别的图形 - 如何插入图片 - 如何限制小球运动的边界 本文将对以上问题依次做出解说。其中前三点是 SVG 元素的问题,和 D3 无多大关联。 ## 1. SVG 图片 SVG 的图片元素的详细解说可看【[官方文档-图片](http://www.w3.org/TR/SVG11/struct.html#ImageElement)】。通常,我们只需要使用到图片元素的五个属性就够了。 ~~~ ~~~ 其中: - xlink:href - 图片名称或图片网址 - x - 图片坐上角 x 坐标 - y - 图片坐上角 y 坐标 - width - 图片宽度 - height- 图片高度 在 D3 中插入图片,代码形如: ~~~ svg.selectAll("image") .data(dataset) .enter() .append("image") .attr("x",200) .attr("y",200) .attr("width",100) .attr("height",100) .attr("xlink:href","image.png"); ~~~ ## 2. SVG 文本 SVG 的文本元素和图片类似,详细属性见【[官方文档-文本](http://www.w3.org/TR/SVG11/text.html#TextElement)】。 ~~~ Hello ~~~ 其中: - x - 文本 x 坐标 - y - 文本 y 坐标 - dx- x 轴方向的文本平移量 - dy- y 轴方向的文本平移量 - font-family - 字体 - font-size - 字体大小 - fill - 字体颜色 在 D3 中插入文本,代码形如: ~~~ svg.selectAll("text") .data(dataset) .enter() .append("text") .attr("x",250) .attr("y",150) .attr("dx",10) .attr("dy",10) .text("Hello"); ~~~ ## 3. 源文件 接下来制作力学图的源文件,本次将数据写入 JSON 文件中。 呵呵,借用一下【仙剑4】的人物,本人也是个仙剑迷,期待15年7月【仙剑6】的上市。 ~~~ { "nodes":[ { "name": "云天河" , "image" : "tianhe.png" }, { "name": "韩菱纱" , "image" : "lingsha.png" }, { "name": "柳梦璃" , "image" : "mengli.png" }, { "name": "慕容紫英" , "image" : "ziying.png" } ], "edges":[ { "source": 0 , "target": 1 , "relation":"挚友" }, { "source": 0 , "target": 2 , "relation":"挚友" }, { "source": 0 , "target": 3 , "relation":"挚友" } ] } ~~~ 如上,在 JSON 文件中添加数据,再将图片文件与 JSON 文件放于同一目录下即可(放哪都行,最主要是看程序中是如何实现的)。 ## 4. 力学图 ### 4.1 读入文件 读入 JSON 文件,这点应该很熟了吧。不然可以先看看【[第 9.4 章](http://www.ourd3js.com/wordpress/?p=245)】。 ~~~ d3.json("relation.json",function(error,root){ if( error ){ return console.log(error); } console.log(root); } ~~~ ### 4.2 定义力学图的布局 力学图的 Layout(布局)如下: ~~~ var force = d3.layout.force() .nodes(root.nodes) .links(root.edges) .size([width,height]) .linkDistance(200) .charge(-1500) .start(); ~~~ 其中 linkDistance 是结点间的距离, charge 是定义结点间是吸引(值为正)还是互斥(值为负),值越大力越强。 ### 4.3 绘制连接线 绘制结点之间的连接线的代码如下: ~~~ 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; }); ~~~ 其中,第 1 - 6 行:绘制直线 第 8 - 15 行:绘制直线上的文字 直线上文字的样式为: ~~~ .linetext { font-size: 12px ; font-family: SimSun; fill:#0000FF; fill-opacity:0.0; } ~~~ fill-opacity 是透明度,0表示完全透明,1表示完全不透明。这里是0,表示初始状态下不显示。 ### 4.4 绘制结点 绘制结点的图片和文字: ~~~ 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){ d.show = true; }) .on("mouseout",function(d,i){ d.show = false; }) .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; }); ~~~ 第 1 - 16 行:绘制图片 第 10 - 15 行:当鼠标移到图片上时,显示与此结点想关联的连接线上的文字。在这里只是对 d.show 进行布尔型赋值,在后面更新时会用到这个值。 第 21 - 30 行:绘制图片下方的文字 ### 4.5 更新 让力学图不断更新,使用 force.on("tick",function(){ }),表示每一步更新都调用 function 函数。 ~~~ 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 ; }); //是否绘制连接线上的文字 edges_text.style("fill-opacity",function(d){ return d.source.show || d.target.show ? 1.0 : 0.0 ; }); //更新结点图片和文字 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; }); }); ~~~ ## 5. 结果 结果如下: ![](https://docs.gechiui.com/gc-content/uploads/sites/kancloud/2016-08-17_57b417842fd80.jpg) 可点击下面的地址,右键点浏览器查看完整代码:[http://www.ourd3js.com/demo/J-2.0/relationforce.html](http://www.ourd3js.com/demo/J-2.0/relationforce.html) ## 6. 结束语 在【[入门系列](http://www.ourd3js.com/wordpress/?p=396)】中,疑问最多的是【[树状图](http://www.ourd3js.com/wordpress/?p=254)】,本想先解决这个问题的,但是由于我也有些问题还没想明白,所以先写本文这个较容易的。接下来还将有几篇关于力学图的,树状图的整理要稍微拖一段时间。 谢谢阅读。 文档信息 - 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND) - 发表日期:2014年10月25日 - 更多内容:[OUR D3.JS - 数据可视化专题站](http://www.ourd3js.com/) 和[CSDN个人博客](http://blog.csdn.net/lzhlzz) - 备注:转载请注明出处,谢谢
';