stack布局

stack布局的用法还是跟其他一样，我们要知道用stack（dataset）生成的数据形式是什么，然后用生成的数据去生成我们需要的svg图形，

    var dataset = [
    { name: "PC" , 
      sales: [  { year:2005, profit: 3000 },
                { year:2006, profit: 1300 },
                { year:2007, profit: 3700 },
                { year:2008, profit: 4900 },
                { year:2009, profit: 700 }] },
    { name: "SmartPhone" , 
      sales: [  { year:2005, profit: 2000 },
                { year:2006, profit: 4000 },
                { year:2007, profit: 1810 },
                { year:2008, profit: 6540 },
                { year:2009, profit: 2820 }] },
    { name: "Software" , 
      sales: [  { year:2005, profit: 1100 },
                { year:2006, profit: 1700 },
                { year:2007, profit: 1680 },
                { year:2008, profit: 4000 },
                { year:2009, profit: 4900 }] }
    ];
    var width=500,height=500,padding=50;
    var svg=d3.select("body")
                .append("svg")
                .attr("width",width)
                .attr("height",height);
    var stack=d3.layout.stack()
                       .values(function(d){return d.sales})
                       .x(function(d){return d.year})
                       .y(function(d){return d.profit});

    var data=stack(dataset);

在控制台可以看到，一级子元素，name，salse，在sales下有二级子元素，year，Profit，y0，y，有四组这样的数组，y0是y的坐标，y是高度，生成图形的过程是这样的，先循环第一组数据，然后生成最下边一层栈，每一年的pc先画出来，然后再层层叠加起来，并不是一条柱子一条柱子画出来的。

2.生成坐标轴

    /*生成x轴*/
    var xscale=d3.scale.ordinal()
                       .domain(data[0].sales.map(function(d){return d.year}))
                       .rangeRoundBands([padding,width-padding],0.2)
    var xaxis=d3.svg.axis()
                    .scale(xscale)
                    .orient("buttom")
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate("+padding+","+(height-padding)+")")
        .call(xaxis);
    /*生成y轴*/
    var ymax=d3.max(data[data.length-1].sales,function(d){return d.y0+d.y});

    var yscale=d3.scale.linear()
                       .domain([0,ymax])
                       .range([height-padding,padding])
    var yaxis=d3.svg.axis()
                    .scale(yscale)
                    .orient("left")
    svg.append("g")
        .attr("class","axis")
        .attr("transform","translate("+padding+",0)")
        .call(yaxis);

上边生成坐标轴的过程也很简单，比如x轴，映射年份，就需要将年份最小最大找出来，我们去stack（dataset）生成的数据中逐步提取就好了，y轴也是，这里要注意一下，因为svg是从左上角开始，所以，有两种方式选择，好理解的是映射为[0,height],另一种是y轴在映射的时候可以映射为[height,0]反一下，那么在生成rect时，height参数需要变一下，见代码。

3.生成栈矩形

var color=d3.scale.category10();
    var groups=svg.selectAll("g .rect")
                 .data(data)
                 .enter()
                 .append("g")
                 .attr("class","rect")
                 .attr("fill",function(d,i){return color(i)});

    groups.selectAll("rect")
       .data(function(d){return d.sales;})
       .enter()
       .append("rect")
       .attr("x",function(d){
            return xscale(d.year);
       })
       .attr("y",function(d){
            return yscale(d.y0+d.y);
       })
       .attr("width",function(d){
            return xscale.rangeBand();
       })
       .attr("height",function(d){
            return height-yscale(d.y);   //与映射为[height,0]是成对出现的。
       })
       .attr("transform","translate("+padding+","+(-padding)+")");
    var labHeight = 50;
    var labRadius = 10;
    //生成圆形lable
    var labelCircle = groups.append("circle")
                        .attr("cx",function(d){ return width - padding*0.98; })
                        .attr("cy",function(d,i){ return padding  + labHeight * i; })
                        .attr("r",labRadius);

    var labelText = groups.append("text")
                        .attr("x",function(d){ return width - padding*0.8; })
                        .attr("y",function(d,i){ return padding  + labHeight * i; })
                        .attr("dy",labRadius/2)
                        .text(function(d){ return d.name; });