力學圖（力導向圖）與生活中常見的人物關系圖結合，是比較有趣的。本文將以此為憑，闡述在力學圖中如何插入外部圖片和文字。 在【[第 9.2 章](http://www.ourd3js.com/wordpress/?p=196)】中制作了一個最簡單的力學圖。其后有很多朋友有疑問，主要的問題包括： - 如何在小球旁插入文字 - 如何將小球換為別的圖形 - 如何插入圖片 - 如何限制小球運動的邊界 本文將對以上問題依次做出解說。其中前三點是 SVG 元素的問題，和 D3 無多大關聯。 ## 1. SVG 圖片 SVG 的圖片元素的詳細解說可看【[官方文檔-圖片](http://www.w3.org/TR/SVG11/struct.html#ImageElement)】。通常，我們只需要使用到圖片元素的五個屬性就夠了。 ~~~ <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 的文本元素和圖片類似，詳細屬性見【[官方文檔-文本](http://www.w3.org/TR/SVG11/text.html#TextElement)】。 ~~~ <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 章](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. 結果 結果如下：  可點擊下面的地址，右鍵點瀏覽器查看完整代碼：[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) - 備注：轉載請注明出處，謝謝