【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图
力学图（力导向图）与生活中常见的人物关系图结合，是比较有趣的。本文将以此为凭，阐述在力学图中如何插入外部图片和文字。在【第 9.2 章】中制作了一个最简单的力学图。其后有很多朋友有疑问，主要的问题包括：
[*]如何在小球旁插入文字
[*]如何将小球换为别的图形
[*]如何插入图片
[*]如何限制小球运动的边界
本文将对以上问题依次做出解说。其中前三点是 SVG 元素的问题，和 D3 无多大关联。
1. SVG 图片SVG 的图片元素的详细解说可看【官方文档-图片】。通常，我们只需要使用到图片元素的五个属性就够了。
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]<image xlink:href="image.png" x="200" y="200" width="100" height="100"></image>
其中：
[*]xlink:href - 图片名称或图片网址
[*]x - 图片坐上角 x 坐标
[*]y - 图片坐上角 y 坐标
[*]width - 图片宽度
[*]height- 图片高度
在 D3 中插入图片，代码形如：
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]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 的文本元素和图片类似，详细属性见【官方文档-文本】。
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]<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 中插入文本，代码形如：
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]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】的上市。
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]{
[*]"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 章】。
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]d3.json("relation.json",function(error,root){
[*]
[*] if( error ){
[*] return console.log(error);
[*] }
[*] console.log(root);
[*]}
4.2 定义力学图的布局力学图的 Layout（布局）如下：
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]var force = d3.layout.force()
[*] .nodes(root.nodes)
[*] .links(root.edges)
[*] .size()
[*] .linkDistance(200)
[*] .charge(-1500)
[*] .start();
其中 linkDistance 是结点间的距离， charge 是定义结点间是吸引（值为正）还是互斥（值为负），值越大力越强。
4.3 绘制连接线绘制结点之间的连接线的代码如下：
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]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 行：绘制直线上的文字
直线上文字的样式为：
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*].linetext {
[*] font-size: 12px ;
[*] font-family: SimSun;
[*] fill:#0000FF;
[*] fill-opacity:0.0;
[*]}
fill-opacity 是透明度，0表示完全透明，1表示完全不透明。这里是0，表示初始状态下不显示。
4.4 绘制结点绘制结点的图片和文字：
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]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 函数。
view plain copy https://code.csdn.net/assets/CODE_ico.pnghttps://code.csdn.net/assets/ico_fork.svg
[*]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. 结果结果如下：
http://img.blog.csdn.net/20141025102155156?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbHpobHp6/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
可点击下面的地址，右键点浏览器查看完整代码：http://www.ourd3js.com/demo/J-2.0/relationforce.html
6. 结束语在【入门系列】中，疑问最多的是【树状图】，本想先解决这个问题的，但是由于我也有些问题还没想明白，所以先写本文这个较容易的。接下来还将有几篇关于力学图的，树状图的整理要稍微拖一段时间。
页:
[1]