D3.js中Force-Directed Graph詳解


Force-Directed Graph

聊一聊力導向圖。力導向圖在echarts等快捷的可視化工具中都有非常方便的實現方式。來看看d3.js是如何實現的。
先來一張d3.js官網實現的力導向圖的照片:

接下來解釋一下d3.js中實現此力導向圖的過程。

index.html——源碼

<!DOCTYPE html>
<meta charset="utf-8">
<style> .links line { stroke: #999; stroke-opacity: 0.6; } .nodes circle { stroke: #fff; stroke-width: 1.5px; } </style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script> // 定義一個svg畫布 var svg = d3.select("svg"), // 獲取svg畫布的寬度 width = +svg.attr("width"), // 獲取svg畫布的高度 height = +svg.attr("height"); // 定義一個顏色函數 // d3.scaleOrdinal()函數用來定義一個序列,其中的參數d3.schemeCategory20代表序 // 列函數的值域,這里d3.schemeCategory20指的是由RGB十六進制字符串表示的二十種分類 // 顏色的數組。因此,color()函數的值域就是離散的20中顏色值 var color = d3.scaleOrdinal(d3.schemeCategory20); // 創建一個力學模擬器 // d3.forceSimulation()函數用來創建一個空的模擬器 var simulation = d3.forceSimulation() // simulation.force(name,[force])函數的作用是:如果指定了力force,則為指 // 定的名稱name分配力並返回該模擬。 如果未指定力,則返回具有指定名稱的力,如果 // 沒這樣的力,則返回undefined。 (默認情況下,新的模擬沒有力量。) // d3.forceLink()函數用來創建一個空的link力數組 // d3.forceLink().id()用來指定link力數組中每個節點的id的獲取方式 .force("link", d3.forceLink().id(function(d) { return d.id; })) // 創建一個charge數組,forceManyBody()返回一個新的多體力數組 .force("charge", d3.forceManyBody()) // d3.forceCenter()用指定的x坐標和y坐標創建一個新的居中力。 // 如果未指定x和y,則默認為⟨0,0⟩。 .force("center", d3.forceCenter(width / 2, height / 2)); // 讀取數據,該例子中的數據是雨果的《悲慘世界》中的人物關系信息。 // 通過力學模擬,人物關系相近的節點會比較接近;反之,節點會比較疏遠 d3.json("miserables.json", function(error, graph) { if (error) throw error; // 定義人物節點之間連線的信息 var link = svg.append("g") .attr("class", "links") // 用line元素來繪制  .selectAll("line") // 綁定json文件中的links數據 .data(graph.links) .enter().append("line") // 人物節點之間連接線的粗細通過連接線的value字段來計算,value越大,連接線  // 越粗 .attr("stroke-width", function(d) { return Math.sqrt(d.value); }); // 定義人物節點信息 var node = svg.append("g") .attr("class", "nodes") // 人物節點通過圓來繪制  .selectAll("circle") // 為人物節點綁定nodes數據 .data(graph.nodes) .enter().append("circle") // 設置節點半徑 .attr("r", 5) // 設置節點的填充色,通過節點的group屬性來計算節點的填充顏色 .attr("fill", function(d) { return color(d.group); }) // 以定義的這些人物節點為參數,調用drag()函數 // 綁定拖拽函數的三個鈎子,即拖拽開始、拖拽中、拖拽結束 .call(d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended)); //為人物節點綁定文字 node.append("title") .text(function(d) { return d.id; }); // 為力模擬器綁定節點數據 // 會為每個節點自動添加可視化時所需的index,vx,xy,x,y五個字段信息 // 並且為simulation內部計時器tick監聽綁定動作,來繪制圖形 simulation .nodes(graph.nodes) .on("tick", ticked);// 此處在每次tick時繪制力導向圖 // 為力模擬器綁定連接線數據 // 調用結束后,會為每個連接線添加可視化時所需要的index,vx,vy,x,y五個字段信息 simulation.force("link") .links(graph.links); // 定義simulation內部計時器tick每次結束時的動作 function ticked() { // 每次tick計時到時,連接線的響應動作 // 設置連接線兩端的節點的位置 link .attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); // 每次tick計時到時,節點的響應動作 // 設置節點的圓心坐標 node .attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); } }); // 定義開始拖拽節點時的動作 function dragstarted(d) { // restart()方法重新啟動模擬器的內部計時器並返回模擬器。  // 與simulation.alphaTarget或simulation.alpha一起使用時,此方法可用於在交互 // 過程中進行“重新加熱”模擬,例如在拖動節點時,在simulation.stop暫停之后恢復模 // 擬。 if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } // 定義拖拽中的動作 function dragged(d) { d.fx = d3.event.x; d.fy = d3.event.y; } // 定義拖拽結束的動作 function dragended(d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; } </script>

至此,力導向圖解析完畢,這篇中有很多關於力學的專業的功能函數,理解起來有點難度。今天周日,起床后第一件事就是把這篇完結了,歐耶~

這篇文章命運破折,周日寫的,周一早上丟了,幸好認識csdn一哥們,經指點,最后順利找回了。


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: