d3.layout.stack()

什么是堆栈图。

例如，有如下情况：

某公司，销售三种产品：个人电脑、智能手机、软件。

2005年，三种产品的利润分别为3000、2000、1100万。

2006年，三种产品的利润分别为1300、4000、1700万。

计算可得，2005年总利润为6100万，2006年为7000万。

如果要将2005年的总利润用柱形表示，那么应该画三个矩形，三个矩形堆叠在一起。这时候就有一个问题：每一个矩形的起始y坐标是多少？高应该是多少？

堆栈图布局（Stack Layout）能够计算二维数组每一数据层的基线，以方便将各数据层叠加起来，最适合用来处理以上这种场景。

1、数据

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 }
        ]
    }
];

2、数据转换

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

values方法指定需要转换的数据集；

x方法指定数据集中X轴的字段；

y方法指定数据集中Y轴的字段；

转换后的数据如下：

如图，sales的每一项都多了两个值：y0和y。y0即该层起始坐标，y是高度。x坐标有就是year，这些坐标都是在左上角为起点计算的，这点要注意。

3、绘制图形

生成SVG容器

var width = 700;
var height = 500;

var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height);

生成图表容器

var padding = {
    top: 50,
    right: 100,
    bottom: 50,
    left: 50
};

var charts = svg.append('g')
    .attr('transform', 'translate(' + padding.left + ',' + padding.top + ')');

生成颜色比例尺

var colors = d3.scale.category10();

生成X轴和Y轴比例尺

var maxProfit = d3.max(data[data.length - 1].sales, function(d) {
    return d.y0 + d.y;
});
var xScale = d3.scale.ordinal().domain([2005, 2006, 2007, 2008, 2009]).rangeBands([0, width - padding.left - padding.right], 0.3);
var yScale = d3.scale.linear().domain([0, maxProfit]).range([0, height - padding.top - padding.bottom]);

为每种类型数据创建容器

var stack = charts.selectAll('.stakc')
    .data(data)
    .enter()
    .append('g')
    .classed('stack', true)
    .attr('fill', function(d, i) {
        return colors(i);
    })

为每种类型数据创建矩形图

var rect = stack.selectAll('rect')
    .data(function(d) {
        return d.sales;
    })
    .enter()
    .append('rect')
    .attr('x', function(d) {
        return xScale(d.year);
    })
    .attr('y', function(d) {
        return height - padding.top - padding.bottom - yScale(d.y0 + d.y);

    })
    .attr('width', xScale.rangeBand())
    .attr('height', function(d) {
        return yScale(d.y);
    })

生成坐标轴

var xAxis = d3.svg.axis().scale(xScale);
var yAxis = d3.svg.axis().scale(yScale.range([height - padding.top - padding.bottom, 0])).orient('left');
charts.append('g')
    .classed('x axis', true)
    .attr('transform', 'translate(0,' + (height - padding.top - padding.bottom) + ')')
    .call(xAxis)

charts.append('g')
    .classed('y axis', true)
    .call(yAxis)

生成数据类型图示

stack.append('circle')
    .attr('cx', function(d) {
        return width - padding.left - padding.right * 0.9
    })
    .attr('cy', function(d, i) {
        return i * 50
    })
    .attr('r', 5)

stack.append('text')
    .attr('x', function(d) {
        return width - padding.left - padding.right * 0.8
    })
    .attr('y', function(d, i) {
        return i * 50
    })
    .attr('dy', 5)
    .text(function(d) {
        return d.name;
    })

查看在线演示