d3.js实现柱形图，饼图以及折现图

饼图

var width = 500;
var height = 500;
//处理数据
var dataset = [ 30 , 10 , 43 , 55 , 13 ];
var pie = d3.layout.pie();
var piedata = pie(dataset);
 
var svg = d3.select(".column")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
 
//外半径
var outerRadius = 150;
//内半径，为0则中间没有空白
var innerRadius = 30;
 
var arc = d3.svg.arc()    //弧生成器
    .innerRadius(innerRadius)    //设置内半径
    .outerRadius(outerRadius);    //设置外半径
 
//颜色比例尺
var color = d3.scale.category10();
//var color = [d3.rgb(0,0,255),d3.rgb(0,255,0),d3.rgb(0,0,255),d3.rgb(0,255,0),d3.rgb(0,0,255)];
var arcs = svg.selectAll("g")
    .data(piedata)
    .enter()
    .append("g")
    .attr("transform","translate("+ (width/2) +","+ (width/2) +")");
 
arcs.append("path")
    .attr("fill",function(d,i){
        return color(i);
    })
    .attr("d",function(d){
        return arc(d);
    });
 
arcs.append("text")
    .attr("transform",function(d){
        return "translate(" + arc.centroid(d) + ")";
    })
    .attr("text-anchor","middle")
    .text(function(d){
        return d.data;
    });

折线图

var width=500;
var height=500;
 
var dataset=[
    {
        country:"china",
        gdp:[[2000,11920],[2001,13170],[2002,14550],
            [2003,16500],[2004,19440],[2005,22870],
            [2006,27930],[2007,35040],[2008,45470],
            [2009,51050],[2010,59490],[2011,73140],
            [2012,83860],[2013,103550],]
    },
    {
        country:"japan",
        gdp:[[2000,47310],[2001,41590],[2002,39800],
            [2003,43020],[2004,46550],[2005,45710],
            [2006,43560],[2007,43560],[2008,48490],
            [2009,50350],[2010,54950],[2011,59050],
            [2012,59370],[2013,48980],]
    },
];
 
var padding={top:70, right:70, bottom: 70, left:70};
var gdpmax=0;
for(var i=0;i<dataset.length;i++){
    //d3.max求解gdp最大值
    var currGdp=d3.max(dataset[i].gdp,function(d){
        return d[1];
    });
    if(currGdp>gdpmax)
        gdpmax=currGdp;
}
//创建x y轴
var xScale=d3.scale.linear()
    .domain([2000,2013])
    .range([0,width-padding.left-padding.right]);
 
var yScale=d3.scale.linear()
    .domain([0,gdpmax*1.1])
    .range([height-padding.bottom-padding.top,0]);
 
//创建一个直线生成器为了访问数组数据
var linePath=d3.svg.line()
    .x(function(d){
        return xScale(d[0]);
    })
    .y(function(d){
        return yScale(d[1]);
    })
    .interpolate("basis");//插值模式
//定义两个颜色
var colors=[d3.rgb(0,0,255),d3.rgb(0,255,0)];
 
var svg=d3.select(".column")
    .append("svg")
    .attr("width",width)
    .attr("height",height);
 
svg.selectAll("path")
    .data(dataset)
    .enter()
    .append("path")
    .attr("transform","translate("+padding.left+","+padding.top+")")
    .attr("d",function(d){
        return linePath(d.gdp);
    })
    .attr("fill","none")
    .attr("stroke-width",3)
    .attr("stroke",function(d,i){
        console.log(colors[i]);
        return colors[i];
    });
 
//调整xy的位置
var xAxis=d3.svg.axis()
    .scale(xScale)
    .ticks(5)
    .tickFormat(d3.format("d"))
    .orient("bottom");
 
var yAxis=d3.svg.axis()
    .scale(yScale)
    .orient("left");
 
//添加一个g用于放x轴
svg.append("g")
    .attr("class","axis")
    .attr("transform","translate("+padding.left+","+(height-padding.top)+")")
    .call(xAxis);
 
svg.append("g")
    .attr("class","axis")
    .attr("transform","translate("+padding.left+","+padding.top+")")
    .call(yAxis);

柱形图

var width = 400;
var height = 400;
 
var dataset = [10, 20, 30, 50, 45, 60, 18];
var padding = {left: 30, right: 30, top: 20, bottom: 20};
 
var svg = d3.select(".column2").append("svg").attr("width", width).attr("height", height);//添加画布
 
//xy轴
var xScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0, width - padding.left - padding.right]);
var yScale = d3.scale.linear().domain([0, d3.max(dataset)]).range([height - padding.top - padding.bottom, 0]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
var yAxis = d3.svg.axis().scale(yScale).orient("left");
 
//添加矩形元素
var rects = svg.selectAll(".myRect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("class", "myRect")
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
    .attr("x", function (d, i) {
        return xScale(i) + 2;
    })
    .attr("y", function (d, i) {
        return yScale(d);
    })
    .attr("width", function (d, i) {
        return xScale.rangeBand() - 2;
    })
    .attr("height", function (d, i) {
        return height - padding.top - padding.bottom - yScale(d);
    })
    .attr("fill", "steelblue");
 
//添加文字元素
var texts = svg.selectAll(".myText")
    .data(dataset)
    .enter()
    .append("text")
    .attr("class", "myText")
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
    .attr("x", function (d, i) {
        return xScale(i) + 2;
    })
    .attr("y", function (d, i) {
        return yScale(d);
    })
    .attr("width", function (d, i) {
        return (xScale.rangeBand() - 4) / 2;
    })
    .attr("height", function (d, i) {
        return 20;
    }).text(function (d) {
        return d;
    })
 
//添加坐标轴
svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + (height - padding.bottom) + ")")
    .call(xAxis);
svg.append("g").attr("class", "axis").attr("transform", "translate(" + padding.left + "," + padding.top + ")")
    .call(yAxis);