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

          

	
          
		
          
			
          
				
          使用D3js繪制Force-Directed Graph（力導向圖）
          
				
           2021-6-7      前端達人      
          
			
          
			
          
				
          
    Force-directed（力導向）圖形繪制算法通過圖形本身的結構（圖中頂點與邊的拓撲關系）計算出圖形的層次，而不依賴于特定領域的知識。使用力導向算法繪制的平面圖形通常比較美觀，并且圖中各條邊之間的交叉盡可能的少。

          

          
    本文對使用D3js繪制Foorce-Directed Graph（力導向圖）的過程進行簡要的介紹，以下面的邏輯圖（包含6個節點和5條邊）為例。

          

          import json #nodes為圖的節點集合 nodes = [{'name' : 'nodeA'}, 
         {'name' : 'nodeB'}, 
         {'name' : 'nodeC'}, 
         {'name' : 'nodeD'}, 
         {'name' : 'nodeE'}, 
         {'name' : 'nodeF'}] #links為圖的邊集合，source為起點，target為終點 links = [{'source' : 0 , 'target' : 1}, 
         {'source' : 0 , 'target' : 2}, 
         {'source' : 0 , 'target' : 3}, 
         {'source' : 0 , 'target' : 4}, 
         {'source' : 0 , 'target' : 5}] #graph為邏輯圖，由節點集合和邊集合組成 graph = {'nodes' : nodes , 'links' : links} print json.dumps(graph) 
          

          
    

          

          
    上例的源碼 force-directed-graph.html 及注釋如下：

          

          <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .link { stroke : #CCC; stroke-width : 2; } .node text { pointer-events : none; font-size : 12px; } svg { overflow : hidden; } </style> <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script> <script src="http://libs.useso.com/js/d3/3.4.8/d3.min.js"></script> <script> var graph = {"nodes": [{"name": "nodeA"}, 
{"name": "nodeB"}, 
{"name": "nodeC"}, 
{"name": "nodeD"}, 
{"name": "nodeE"}, 
{"name": "nodeF"}], "links": [{"source": 0, "target":1}, 
{"source": 0, "target": 2}, 
{"source": 0, "target": 3}, 
{"source": 0, "target": 4}, 
{"source": 0, "target": 5}]}; //返回隨機顏色代碼 function random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    } return color;
} function draw() { var width = 400; var height = 300; //設置svg寬度和高度 var svg = d3.select("#canvas svg")
    .attr("width", width)
    .attr("height", height); //設置Force-Directed力參數 var force = d3.layout.force()
    .gravity(.05)
    .distance(120)
    .charge(-100)
    .size([width, height]);
  force
    .nodes(graph.nodes)
    .links(graph.links)
    .start(); //選擇邊集合 var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link"); //選擇節點集合 var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag); //響應鼠標拖拽事件 //節點添加圓形圖案 node.append("svg:circle").attr("r", 10)
    .style("fill", function(){ return random_color();
    })
    .style("stroke", "#FFF").style("stroke-width", 3);
    node.append("text")
      .attr("dx", 12)
      .attr("dy", ".36em")
      .text(function(d) { return d.name }); //綁定tick事件 force.on("tick", function() { 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; });
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });
}
$(function(){ draw();
}); </script> </head> <body> <div id="canvas"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300"></svg> </div> </body> </html> 
          

          
     

          

          
    本文鏈接：http://bookshadow.com/weblog/2014/11/04/d3js-force-directed-graph/
          
請尊重作者的勞動成果，轉載請注明出處！書影博客保留對文章的所有權利。

          

          
    
          

          

          
    
          

          

          
    藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。 

          

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

          

          
      藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務

          

          
    
          

          				
          
								
			
          
		
          
		
		
	
          


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

          

          



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