# 玄圖
## 需求
人口遷移展示數據如下:
``` 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)
