d3js之弦图

hb707934728

于 2017-03-10 11:11:41 发布

阅读量813

点赞数 1

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/hb707934728/article/details/61194124

效果图

<html>  
  <head>  
        <meta charset="utf-8">  
        <title>弦图</title>  
  <style>

	.chord path {
  		fill-opacity: 0.67;
  		stroke: #000;
  		stroke-width: 0.5px;
	}

  </style>
  </head> 
    <body>  
		<script src="http://d3js.org/d3.v3.min.js"></script>
		<script>
		
		//1.定义数据
		// 城市名
		var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港"  ];
		
		// 城市人口的来源，如
		//				北京		上海
		//	北京		1000		3045
		//	上海		3214		2000
		// 表示北京市的人口有1000个人来自本地，有3045人是来自上海的移民，总人口为 1000 + 3045
		// 上海市的人口有2000个人来自本地，有3214人是来自北京的移民，总人口为 3214 + 2000
		var population = [
		  [ 1000,  3045　 , 4567　, 1234 , 3714 ],
		  [ 3214,  2000　 , 2060　, 124  , 3234 ],
		  [ 87