【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图
来源:互联网 发布:linux except实现脚本 编辑:程序博客网 时间:2024/04/27 22:53
力学图(力导向图)与生活中常见的人物关系图结合,是比较有趣的。本文将以此为凭,阐述在力学图中如何插入外部图片和文字。
在【第 9.2 章】中制作了一个最简单的力学图。其后有很多朋友有疑问,主要的问题包括:
- 如何在小球旁插入文字
- 如何将小球换为别的图形
- 如何插入图片
- 如何限制小球运动的边界
本文将对以上问题依次做出解说。其中前三点是 SVG 元素的问题,和 D3 无多大关联。
1. SVG 图片
SVG 的图片元素的详细解说可看【官方文档-图片】。通常,我们只需要使用到图片元素的五个属性就够了。
<image xlink:href="image.png" x="200" y="200" width="100" height="100"></image>
其中:
- 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 的文本元素和图片类似,详细属性见【官方文档-文本】。
<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 中插入文本,代码形如:
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 章】。
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. 结果
结果如下:
可点击下面的地址,右键点浏览器查看完整代码:http://www.ourd3js.com/demo/J-2.0/relationforce.html
6. 结束语
在【入门系列】中,疑问最多的是【树状图】,本想先解决这个问题的,但是由于我也有些问题还没想明白,所以先写本文这个较容易的。接下来还将有几篇关于力学图的,树状图的整理要稍微拖一段时间。
谢谢阅读。
文档信息
- 版权声明:署名(BY)-非商业性(NC)-禁止演绎(ND)
- 发表日期:2014年10月25日
- 更多内容:OUR D3.JS - 数据可视化专题站 和CSDN个人博客
- 备注:转载请注明出处,谢谢
- 【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图
- 【 D3.js 进阶系列 — 2.2 】 力学图的参数
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
- 【 D3.js 进阶系列 — 2.1 】 力学图的事件 + 顶点的固定
- D3.js人物关系图
- d3.js——绘制力学图
- 【 D3.js 入门系列 --- 9.2 】 力学图的制作
- D3.js学习笔记十二:D3.js构图(d3.layout)——力学(Force)图
- d3js实现力学图+人物关系图
- 【 D3.js 进阶系列 — 3.0 】 分区图
- 【 D3.js 进阶系列 — 3.1 】 圆形分区图
- 【 D3.js 进阶系列 — 3.2 】 分区图的函数
- d3.js——关于力学图d3.layout.force的参数
- 【D3.JS数据可视化实战记录】绘制力学图
- 【 D3.js 进阶系列 — 5.0 】 直方图
- d3力学图(force layout)更新
- 【 D3.js 进阶系列 】 进阶总结
- 【 D3.js 进阶系列 — 4.0 】 绘制箭头
- Springmvc 如何像struts那样。后台的信息在页面用EL取出来
- 不跑题淘宝机票被迫一堆人
- Codeforces Round #265 (Div. 2) E. Substitutes in Number
- 科技会如此你看你吃几个传统
- 【Leetcode】Add Two Numbers (2 lists)
- 【 D3.js 进阶系列 — 2.0 】 力学图 + 人物关系图
- 滚动条事件,当页面滚动到距顶部一定高度时某DIV自动隐藏和显示
- 排序的基本概念与分类
- 顺序栈
- android 4.1 多媒体本地播放流程video playback (三)
- 杭电2049
- 剑指offer--面试题7两个栈实现队列
- 链队列
- 图片DPI