D3入门系列(4)--D3中的各种图

D3 总共提供了 12 个布局：饼状图（Pie）、力导向图（Force）、弦图（Chord）、树状图（Tree）、集群图（Cluster）、捆图（Bundle）、打包图（Pack）、直方图（Histogram）、分区图（Partition）、堆栈图（Stack）、矩阵树图（Treemap）、层级图（Hierarchy）。

饼状图

//创建画布
var svg=d3.select("body")
          .append("svg")
          .attr("width",400)
          .attr("height",400)

var dataset=[23,43,65,52,37]
var pie=d3.layout.pie()
//进行数据转换
var piedata=pie(dataset)

//绘制图像
var outerRadius=100
var innerRadius=0

var arc=d3.svg.arc()  //弧生成器，arc可做函数用
          .innerRadius(innerRadius)
          .outerRadius(outerRadius)
//添加分组
var width=400
var color=d3.scale.category20();

var arcs=svg.selectAll("g")
            .data(piedata)
            .enter()
            .append("g")
            .attr("transform","translate("+(width/2)+","+(width/2)+")")
//为每个g，添加path
arcs.append("path")
    .attr("fill",function(d,i){
        return color(i)
    })
    .attr("d",function(d){
        return arc(d)
    })
//因为 arcs 是同时选择了 5 个 <g> 元素的选择集，所以调用 append(“path”) 后，每个 <g> 中都有 <path>



//添加文本
arcs.append("text")
    .attr("transform",function(d){
        return "translate("+arc.centroid(d)+")"
    })
    .attr("text-anchor","middle")
    .text(function(d){
        return d.data
    })

 力导向图

//创建画布
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; });
});

弦图

//创建画布
width=600
height=600
var svg=d3.select("body")
          .append("svg")
          .attr("width",width)
          .attr("hight",height)
//数据
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 chord_layout = d3.layout.chord()
  .padding(0.03) //节点之间的间隔
  .sortSubgroups(d3.descending) //排序
  .matrix(population); //输入矩阵

var groups = chord_layout.groups();
var chords = chord_layout.chords();
 

 var innerRadius = width/2 * 0.7;
 var outerRadius = innerRadius * 1.1;

 var color20 = d3.scale.category20();

 var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")");
     var width = 600;
 var height = 600;
 var innerRadius = width/2 * 0.7;
 var outerRadius = innerRadius * 1.1;

 var color20 = d3.scale.category20();

 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")
    .attr("class", "chord")
    .selectAll("path")
    .data(chords)
    .enter()
    .append("path")
    .attr("d", inner_chord )  //
    .style("fill", function(d) { return color20(d.source.index); })
    .style("opacity", 1)
    .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));
    });

两点之间的连线，表示两者之间具有联系；线的粗细代表权重

线的两端的意义：例如广州和北京，广州一侧的宽度大于北京一侧的宽度，代表北京迁到广州的多于广州迁到北京的