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一哥們，經指點，最後順利找回了。