【 D3.js 高級系列 — 2.0 】 機械圖 + 人物關系圖

機械圖（力路線圖）結合老百姓的關系圖中的生活，這是更有趣。

本文將以此為證據，所列的如何圖插入外部的圖像和文字的力學。

在【第 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. 結束語

在【入門系列】中，疑問最多的是【樹狀圖】，本想先解決問題的。可是因為我也有些問題還沒想明確。所以先寫本文這個較easy的。接下來還將有幾篇關於力學圖的，樹狀圖的整理要略微拖一段時間。

謝謝閱讀。

---

文檔信息

• 版權聲明：署名（BY）-非商業性（NC）-禁止演繹（ND）
• 發表日期：2014年10月25日
• 很多其它內容：OUR D3.JS - 數據可視化專題站 和CSDN個人博客
• 備注：轉載請注明出處，謝謝

---