<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          

	
          
		
          
			
          
				
          D3.js中Force-Directed Graph詳解
          
				
           2021-6-9      前端達人      
          
			
          
			
          
				
          
    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>

            

    
          • 
        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
    
            • 


          

          

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

          

          
    這篇文
    
          
        藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
    
          
    
          
        截屏2021-05-13 上午11.41.03.png
          
          
    
          
    
          
        
          
    
          
    
          
        部分借鑒自：csdn  
    
          
    
          
        原文鏈接：
    
          
    
          
        分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    
          

    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    
          
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          

          				
          
								
			
          
		
          
		
		
	
          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合