d3.js之力导向图

最新推荐文章于 2024-08-15 09:14:52 发布

hb707934728

最新推荐文章于 2024-08-15 09:14:52 发布

阅读量2.6k

点赞数 2

分类专栏：数据可视化之D3.js_学习笔记

本文链接：https://blog.csdn.net/hb707934728/article/details/60964821

版权

数据可视化之D3.js_学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

效果图

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>力导向图</title>  
  </head> 

<style>


</style>
    <body>  
		<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>  
        <script>		   
					   
		var nodes = [ { name: "桂林"    }, { name: "广州" },
					  { name: "厦门"    }, { name: "杭州"   },
					  { name: "上海"   }, { name: "青岛"    },
					  { name: "天津"    } ];
					 
		var edges = [  { source : 0  , target: 1 } , { source : 0  , target: 2 } ,
					   { source : 0  , target: 3 } , { source : 1  , target: 4 } ,
					   { source : 1  , target: 5 } , { source : 1  , target: 6 }  ];	
		
		var width=400;
		var height=400;
		
		var svg=d3.select("body")
							.append("svg")
							.attr("width",width)
							.attr("height",height);
					
		var force=d3.layout.force()
				.nodes(nodes)//指定节点数组
				.links(edges)//指定连线数组
				.size([width,height])//指定范围
				.linkDistance(150) //指定连线长度
				.charge(-400);//相互之间的作用力
					
		force.start();//开始作用
		
		console.log(nodes);
		console.log(edges);
		
					//添加连线
		var svg_edges=svg.selectAll("line")
				 							.data(edges)
				 							.enter()
				 							.append("line")
				 							.style("stroke","#cc")
				 							.style("stroke-width",1);
		var color=d3.scale.category20();//颜色比例尺
					//添加节点
		var svg_nodes=svg.selectAll("circle")
											.data(nodes)
											.enter()
											.append("circle")
											.attr("r",20)
				.style("fill",function(d,i){
											return color(i);
				})
				.call(force.drag);//使得节点能拖动
					//添加描述节点的文字
		var svg_texts=svg.selectAll("text")
				.data(nodes)
				.enter()
				.append("text")
				.style("fill","black")
				.attr("dx",20)
				.attr("dy",8)
				.text(function(d){
						return d.name;
				});
					
		force.on("tick",function(){//对于每一个时间间隔
			//更新连线坐标
			svg_edges
				.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; });
			 //更新节点坐标
			 svg_nodes.attr("cx",function(d){ return d.x; })
			 		.attr("cy",function(d){ return d.y; });

			 //更新文字坐标
			 svg_texts.attr("x", function(d){ return d.x; })
			 	.attr("y", function(d){ return d.y; });
			
					});
		
		  
        </script>  
		
    </body>  
</html>

演示地址：http://runjs.cn/detail/thdu7p1e