# 玄图
## 需求
人口迁移展示数据如下：
``` javascript
var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ];
var population = [
[ 1000, 3045 , 4567 , 1234 , 3714 ],
[ 3214, 2000 , 2060 , 124 , 3234 ],
[ 8761, 6545 , 3000 , 8045 , 647 ],
[ 3211, 1067 , 3214 , 4000 , 1006 ],
[ 2146, 1034 , 6745 , 4764 , 5000 ]
];
```
## d3.chord
使用布局器可以得到一组数据chrod
``` json
source:{
index: 2,
subindex: 0,
startAngle: 1.8230785342635087,
endAngle: 2.4832964178069363,
value: 8761
}
target:{
index: 0,
subindex: 2,
startAngle: 0.3048260859414638,
endAngle: 0.6489894319228396,
value: 4567
}
```
这个很清晰，里面描述的是玄图中一个玄。
同时还有goups里面描述了外圈环的角度。其中一个
``` json
{
index: 0,
startAngle: 0,
endAngle: 1.0218644562092087,
value: 13560
}
```
真实数据如下图
通过得到如上数据，接下来绘制就非常简单了
1.使用一组path绑定group数据，使用d3.arc来绘制环形。
2.使用一组path绑定chrod数据，使用d3.ribbon()来绘制中心的玄即可。
## 绘制
``` javascript
//创建svg
var svg = d3.select('#root')
.append('svg')
.attr('width', 600)
.attr('height', 600)
.style("background-color","rgb(142, 137, 137)");
var margin=[100,100,100,100]
//模拟数据:
var city_name = ["北京","上海","广州","深圳","香港"];
var population = [
[ 1000, 3045 , 4567 , 1234 , 3714 ],
[ 3214, 2000 , 2060 , 124 , 3234 ],
[ 8761, 6545 , 3000 , 8045 , 647 ],
[ 3211, 1067 , 3214 , 4000 , 1006 ],
[ 2146, 1034 , 6745 , 4764 , 5000 ]
];
//处理数据得到适合绘图数据
var chrodes = d3.chrod()(population)
//构建颜色比例尺
var color = d3.scaleOrdinal(d3.schemeCategory20)
//创建分组
var rootG = svg.append('g').attr('class','rootG')
.attr('transform','translate(300,300)')
var groupG = rootG.append('g').attr('class','group')
var chrodG = rootG.append('g').attr('class','chrodes')
//创建绘制器
var arc = d3.arc()
.innerRadius(240)
.outerRadius(270)
var ribbon = d3.ribbon()
.radius(240)
//绘制
groupG.selectAll("path")
.data(chrodes['groups'])
.enter()
.append('path')
.attr("fill", function (d, i) { return color(i) })
.attr('d',arc)
chrodG.selectAll('path')
.data(chrodes)
.enter()
.append('path')
.attr("fill", function (d, i) { return color(i) })
.attr('d',ribbon)
```
## 实例
无交互[chord0](https://doter1995.github.io/d3-start-course/chrod/chrod-0.html)
