D3.js中Force-Directed Graph詳解

2021-6-9    前端達(dá)人

Force-Directed Graph

聊一聊力導(dǎo)向圖。力導(dǎo)向圖在echarts等快捷的可視化工具中都有非常方便的實(shí)現(xiàn)方式。來看看d3.js是如何實(shí)現(xiàn)的。
先來一張d3.js官網(wǎng)實(shí)現(xiàn)的力導(dǎo)向圖的照片：

接下來解釋一下d3.js中實(shí)現(xiàn)此力導(dǎo)向圖的過程。

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

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    • 

    
  • 
        34
    
    • 

    
  • 
        35
    
    • 

    
  • 
        36
    
    • 

    
  • 
        37
    
    • 

    
  • 
        38
    
    • 

    
  • 
        39
    
    • 

    
  • 
        40
    
    • 

    
  • 
        41
    
    • 

    
  • 
        42
    
    • 

    
  • 
        43
    
    • 

    
  • 
        44
    
    • 

    
  • 
        45
    
    • 

    
  • 
        46
    
    • 

    
  • 
        47
    
    • 

    
  • 
        48
    
    • 

    
  • 
        49
    
    • 

    
  • 
        50
    
    • 

    
  • 
        51
    
    • 

    
  • 
        52
    
    • 

    
  • 
        53
    
    • 

    
  • 
        54
    
    • 

    
  • 
        55
    
    • 

    
  • 
        56
    
    • 

    
  • 
        57
    
    • 

    
  • 
        58
    
    • 

    
  • 
        59
    
    • 

    
  • 
        60
    
    • 

    
  • 
        61
    
    • 

    
  • 
        62
    
    • 

    
  • 
        63
    
    • 

    
  • 
        64
    
    • 

    
  • 
        65
    
    • 

    
  • 
        66
    
    • 

    
  • 
        67
    
    • 

    
  • 
        68
    
    • 

    
  • 
        69
    
    • 

    
  • 
        70
    
    • 

    
  • 
        71
    
    • 

    
  • 
        72
    
    • 

    
  • 
        73
    
    • 

    
  • 
        74
    
    • 

    
  • 
        75
    
    • 

    
  • 
        76
    
    • 

    
  • 
        77
    
    • 

    
  • 
        78
    
    • 

    
  • 
        79
    
    • 

    
  • 
        80
    
    • 

    
  • 
        81
    
    • 

    
  • 
        82
    
    • 

    
  • 
        83
    
    • 

    
  • 
        84
    
    • 

    
  • 
        85
    
    • 

    
  • 
        86
    
    • 

    
  • 
        87
    
    • 

    
  • 
        88
    
    • 

    
  • 
        89
    
    • 

    
  • 
        90
    
    • 

    
  • 
        91
    
    • 

    
  • 
        92
    
    • 

    
  • 
        93
    
    • 

    
  • 
        94
    
    • 

    
  • 
        95
    
    • 

    
  • 
        96
    
    • 

    
  • 
        97
    
    • 

    
  • 
        98
    
    • 

    
  • 
        99
    
    • 

    
  • 
        100
    
    • 

    
  • 
        101
    
    • 

    
  • 
        102
    
    • 

    
  • 
        103
    
    • 

    
  • 
        104
    
    • 

    
  • 
        105
    
    • 

    
  • 
        106
    
    • 

    
  • 
        107
    
    • 

    
  • 
        108
    
    • 

    
  • 
        109
    
    • 

    
  • 
        110
    
    • 

    
  • 
        111
    
    • 

    
  • 
        112
    
    • 

    
  • 
        113
    
    • 

    
  • 
        114
    
    • 

    
  • 
        115
    
    • 

    
  • 
        116
    
    • 

    
  • 
        117
    
    • 

    
  • 
        118
    
    • 

    
  • 
        119
    
    • 

    
  • 
        120
    
    • 

    
  • 
        121
    
    • 

    
  • 
        122
    
    • 

    
  • 
        123
    
    • 

    
  • 
        124
    
    • 

    
  • 
        125
    
    • 

    
  • 
        126
    
    • 

    
  • 
        127
    
    • 

    
  • 
        128
    
    • 

    
  • 
        129
    
    • 

    
  • 
        130
    
    • 

    
  • 
        131
    
    • 

    
  • 
        132
    
    • 

    
  • 
        133
    
    • 

    
  • 
        134
    
    • 

    
  • 
        135
    
    • 

    
  • 
        136
    
    • 

    
  • 
        137
    
    • 

    
  • 
        138
    
    • 

    
  • 
        139
    
    • 

    
  • 
        140
    
    • 

    
  • 
        141
    
    • 

    
  • 
        142
    
    • 

    
  • 
        143
    
    • 

    
  • 
        144
    
    • 

    
  • 
        145
    
    •

至此，力導(dǎo)向圖解析完畢，這篇中有很多關(guān)于力學(xué)的專業(yè)的功能函數(shù)，理解起來有點(diǎn)難度。今天周日，起床后第一件事就是把這篇完結(jié)了，歐耶~

這篇文

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

截屏2021-05-13 上午11.41.03.png


部分借鑒自：csdn  

原文鏈接：

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

分享本文至：

日歷

鏈接

個(gè)人資料

存檔