【d3.js教程07】弦圖 · D3.js征途

![](https://box.kancloud.cn/2016-04-19_57161005a9bce.jpg) ~~~ <!DOCTYPE html> <html> <head> <script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> <meta charset="utf-8"> <title></title> </head> <body> <svg></svg> <script type="text/javascript"> var svg = d3.select("svg"); var city_name = [ "北京" , "上海" , "廣州" , "深圳" , "香港" ]; var population = [ [ 1000, 3045　 , 4567　, 1234 , 3714 ], //北京本地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 chord_layout = d3.layout.chord()// .padding(0.1) //節點之間的間隔(這個間隔反正不能太大了，只能在1以內) .sortSubgroups(d3.descending) //排序(每組順序內部排序，順時針排列還是逆時針排列) .matrix(population); //輸入矩陣 //相當于數據綁定吧 var groups = chord_layout.groups(); var chords = chord_layout.chords(); //代表中間顯示的那些線條 var width = 400; //svg寬高 var height = 400; var innerRadius = width/2 * 0.6; //內半徑 var outerRadius = innerRadius+5; //外半徑環寬度 var color20 = d3.scale.category20(); //顏色分類 /*初始化svg*/ var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) .append("g") .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); /*畫弧*/ var outer_arc = d3.svg.arc() .innerRadius(innerRadius) //內半徑 .outerRadius(outerRadius); //外半徑 var g_outer = svg.append("g"); //添加了環的組 g_outer.selectAll("path") .data(groups) .enter() .append("path") .style("fill", function(d) { return color20(d.index); }) .style("stroke", function(d) { return color20(d.index); }) .attr("d", outer_arc ); //添加環的布局模板 g_outer.selectAll("text") .data(groups) .enter() .append("text") .each( function(d,i) { d.angle = (d.startAngle + d.endAngle) / 2; //在弧形區的一半 d.name = city_name[i]; }) .attr("dy",".35em") .attr("transform", function(d){ //設定字體顯示方位 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)" : ""); }) .text(function(d){ return d.name; }); var inner_chord = d3.svg.chord() //設定了布局 .radius(innerRadius); //設定了半徑 /*添加弦*/ svg.append("g") .selectAll("path") .data(chords) //弦數據綁定 .enter() .append("path") .attr("d", inner_chord ) .style("fill", function(d) { return color20(d.source.index); }) //連線變色 .style("opacity", 0.4) .on("mouseover",function(d,i){ //鼠標移入變色 d3.select(this) .style("fill","yellow"); }) .on("mouseout",function(d,i) { //鼠標移出變回去 d3.select(this) .transition() .duration(1000) .style("fill",color20(d.source.index)); }); </script> </body> </html> ~~~