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);