D3入门系列(4)--D3中的各种图
D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。
饼状图
1 //创建画布 2 var svg=d3.select("body") 3 .append("svg") 4 .attr("width",400) 5 .attr("height",400) 6 7 var dataset=[23,43,65,52,37] 8 var pie=d3.layout.pie() 9 //进行数据转换 10 var piedata=pie(dataset) 11 12 //绘制图像 13 var outerRadius=100 14 var innerRadius=0 15 16 var arc=d3.svg.arc() //弧生成器，arc可做函数用 17 .innerRadius(innerRadius) 18 .outerRadius(outerRadius) 19 //添加分组 20 var width=400 21 var color=d3.scale.category20(); 22 23 var arcs=svg.selectAll("g") 24 .data(piedata) 25 .enter() 26 .append("g") 27 .attr("transform","translate("+(width/2)+","+(width/2)+")") 28 //为每个g，添加path 29 arcs.append("path") 30 .attr("fill",function(d,i){ 31 return color(i) 32 }) 33 .attr("d",function(d){ 34 return arc(d) 35 }) 36 //因为 arcs 是同时选择了 5 个 <g> 元素的选择集，所以调用 append(“path”) 后，每个 <g> 中都有 <path> 37 38 39 40 //添加文本 41 arcs.append("text") 42 .attr("transform",function(d){ 43 return "translate("+arc.centroid(d)+")" 44 }) 45 .attr("text-anchor","middle") 46 .text(function(d){ 47 return d.data 48 })
力导向图
//创建画布 svg=d3.select("#force") .append("svg") .attr("width",400) .attr("height",400) //数据 var nodes = [ { name: "桂林" }, { name: "广州" }, { name: "厦门" }, { name: "杭州" }, { name: "上海" }, { name: "青岛" }, { name: "天津" } ]; var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } , { source : 0 , target: 3 } , { source : 1 , target: 4 } , { source : 1 , target: 5 } , { source : 1 , target: 6 } ]; //数据转换 var force = d3.layout.force() .nodes(nodes) //指定节点数组 .links(edges) //指定连线数组 .size([400,400]) //指定作用域范围 .linkDistance(150) //指定连线长度 .charge([-400]); //相互之间的作用力 force.start(); //开始作用 //添加连线 var svg_edges = svg.selectAll("line") .data(edges) .enter() .append("line") .style("stroke","#ccc") .style("stroke-width",1); var color = d3.scale.category20(); //添加节点 var svg_nodes = svg.selectAll("circle") .data(nodes) .enter() .append("circle") .attr("r",20) .style("fill",function(d,i){ return color(i); }) .call(force.drag); //使得节点能够拖动 //添加描述节点的文字 var svg_texts = svg.selectAll("text") .data(nodes) .enter() .append("text") .style("fill", "black") .attr("dx", 20) .attr("dy", 8) .text(function(d){ return d.name; }); force.on("tick", function(){ //对于每一个时间间隔 //更新连线坐标 svg_edges.attr("x1",function(d){ return d.source.x; }) .attr("y1",function(d){ return d.source.y; }) .attr("x2",function(d){ return d.target.x; }) .attr("y2",function(d){ return d.target.y; }); //更新节点坐标 svg_nodes.attr("cx",function(d){ return d.x; }) .attr("cy",function(d){ return d.y; }); //更新文字坐标 svg_texts.attr("x", function(d){ return d.x; }) .attr("y", function(d){ return d.y; }); });
弦图
1 //创建画布 2 width=600 3 height=600 4 var svg=d3.select("body") 5 .append("svg") 6 .attr("width",width) 7 .attr("hight",height) 8 //数据 9 var city_name = [ "北京" , "上海" , "广州" , "深圳" , "香港" ]; 10 11 var population = [ 12 [ 1000, 3045 , 4567 , 1234 , 3714 ], 13 [ 3214, 2000 , 2060 , 124 , 3234 ], 14 [ 8761, 6545 , 3000 , 8045 , 647 ], 15 [ 3211, 1067 , 3214 , 4000 , 1006 ], 16 [ 2146, 1034 , 6745 , 4764 , 5000 ] 17 ]; 18 19 //数据变换 20 var chord_layout = d3.layout.chord() 21 .padding(0.03) //节点之间的间隔 22 .sortSubgroups(d3.descending) //排序 23 .matrix(population); //输入矩阵 24 25 var groups = chord_layout.groups(); 26 var chords = chord_layout.chords(); 27 28 29 var innerRadius = width/2 * 0.7; 30 var outerRadius = innerRadius * 1.1; 31 32 var color20 = d3.scale.category20(); 33 34 var svg = d3.select("body").append("svg") 35 .attr("width", width) 36 .attr("height", height) 37 .append("g") 38 .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 39 var width = 600; 40 var height = 600; 41 var innerRadius = width/2 * 0.7; 42 var outerRadius = innerRadius * 1.1; 43 44 var color20 = d3.scale.category20(); 45 46 var svg = d3.select("body").append("svg") 47 .attr("width", width) 48 .attr("height", height) 49 .append("g") 50 .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 51 //绘制节点 52 var outer_arc = d3.svg.arc() 53 .innerRadius(innerRadius) 54 .outerRadius(outerRadius); 55 56 var g_outer = svg.append("g"); 57 58 g_outer.selectAll("path") 59 .data(groups) 60 .enter() 61 .append("path") 62 .style("fill", function(d) { return color20(d.index); }) 63 .style("stroke", function(d) { return color20(d.index); }) 64 .attr("d", outer_arc ); 65 66 g_outer.selectAll("text") 67 .data(groups) 68 .enter() 69 .append("text") 70 .each( function(d,i) { 71 d.angle = (d.startAngle + d.endAngle) / 2; 72 d.name = city_name[i]; 73 }) 74 .attr("dy",".35em") 75 .attr("transform", function(d){ 76 return "rotate(" + ( d.angle * 180 / Math.PI ) + ")" + 77 "translate(0,"+ -1.0*(outerRadius+10) +")" + 78 ( ( d.angle > Math.PI*3/4 && d.angle < Math.PI*5/4 ) ? "rotate(180)" : ""); 79 }) 80 .text(function(d){ 81 return d.name; 82 }); 83 //绘制弦 84 var inner_chord = d3.svg.chord() 85 .radius(innerRadius); 86 87 svg.append("g") 88 .attr("class", "chord") 89 .selectAll("path") 90 .data(chords) 91 .enter() 92 .append("path") 93 .attr("d", inner_chord ) // 94 .style("fill", function(d) { return color20(d.source.index); }) 95 .style("opacity", 1) 96 .on("mouseover",function(d,i){ 97 d3.select(this) 98 .style("fill","yellow"); 99 }) 100 .on("mouseout",function(d,i) { 101 d3.select(this) 102 .transition() 103 .duration(1000) 104 .style("fill",color20(d.source.index)); 105 });
两点之间的连线，表示两者之间具有联系；线的粗细代表权重
线的两端的意义：例如广州和北京，广州一侧的宽度大于北京一侧的宽度，代表北京迁到广州的多于广州迁到北京的
