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: ;
}
.nodes circle {
stroke: #fff;
stroke-width: px;
}
</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 / , height / ));
// 讀取資料，該例子中的資料是雨果的《悲慘世界》中的人物關系資訊。
// 通過力學模拟，人物關系相近的節點會比較接近；反之，節點會比較疏遠
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", )
// 設定節點的填充色，通過節點的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().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();
d.fx = null;
d.fy = null;
}
</script>
至此，力導向圖解析完畢，這篇中有很多關于力學的專業的功能函數，了解起來有點難度。今天周日，起床後第一件事就是把這篇完結了，歐耶~
這篇文章命運破折，周日寫的，周一早上丢了，幸好認識csdn一哥們，經指點，最後順利找回了。
![Matplotllib——繪制複雜函數圖與三維圖[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)