D3__chord layout

var matrix=new Array(15);
for (var i=0;i<15;i++){
    matrix[i] = new Array(15)
    for (var j=0;j<15;j++){
      matrix[i][j]=parseInt(Math.random()*8);
    }
}
/*定义一个弦布局*/
console.log(matrix)
var chord_layout=d3.layout.chord()
                          .padding(0.05)   //弧间距
                          .sortSubgroups(d3.ascending())  //结点排序方式
                          .matrix(matrix);   //加载数据

/*拿到弧跟节点*/
//弦布局整合后的数据，一个是groups弧节点，四个字段：index,startangle(弧度为单位),endangle,value一个是弦数据，source与target，每个字段中又有index,subindex,startangle,endangle,value;
var groups=chord_layout.groups();
var chords=chord_layout.chords();
console.log(groups)
console.log(chords)
/*svg画布*/
var width=500,height=400;

var svg=d3.select("body")
          .append("svg")
          .attr("width",width)
          .attr("height",height)
          .append("g")
          .attr("transform","translate("+width/2+","+height/2+")")


/*用弧生成器*/
var innerRadius=height/3.5,outerRadius=height/3;
var arc=d3.svg.arc()
              .innerRadius(innerRadius)
              .outerRadius(outerRadius);

var color=d3.scale.category20();

var g_outer=svg.append("g")
/*弧节点路径*/
g_outer.selectAll("path.arc")
       .data(groups)
       .enter()
       .append("path")
       .attr("class","arc")
       .attr("d",arc)
       .attr("fill",function(d,i){
            return color(d.index);
       })
       .attr("stroke",function(d,i){
            return color(d.index);
       })
/*弧外边文字*/
g_outer.selectAll("text .arc")
       .data(groups)
       .enter()
       .append("text")
       .attr("class","arc")
       .each(function(d,i){
          d.angle=(d.startAngle+d.endAngle)/2;
          d.name=i;
       })
       .attr("transform",function(d,i){
        return "rotate(" + ( d.angle * 180 / Math.PI ) + ")" +
               "translate(0,"+ -1.0*(outerRadius+10) +")" +
               ( ( d.angle > Math.PI*3/4 && d.angle < Math.PI*5/4 ) ? "rotate(180)" : "");
       })
       .attr("dy",".35em")
       .attr("text-anchor","middle")
       .text(function(d,i){
          return d.name;
       })


var inner_chord=d3.svg.chord()
                      .radius(innerRadius)

svg.append("g")
   .selectAll("path .chord")
   .data(chords)
   .enter()
   .append("path")
   .attr("class","chord")
   .attr("d",inner_chord)
   .attr("opacity",0.7)
   .attr("fill",function(d,i){
        return color(d.source.index)

   })
   .on("mouseover",function(d,i){
        d3.select(this)
          .attr("fill",function(d,i){
            return "black";
          })
   })
   .on("mouseout",function(d,i){
        d3.select(this)
          .transition()
          . duration(1000)
          .attr("fill",function(d,i){
            return color(d.source.index);
          })
   })
   .append("title")
   .text(function(d) {
            return "This value is " + d.target.value;
         });