缩放D3中堆积的条形图？

我在程序中有一个简单的堆积条形图，但是我真的不知道如何将其缩放到适当的大小，因为现在值大约为1并且非常薄。看起来是这样的：

===

这是我想要的样子：

5|
4| ZZZZ
3| YYYY
2| XXXX
1| XXXX
 |-------

以下是相关代码：

        //Bar Graph
        var canvas = d3.select("#canvas").append("svg").attr({
            width: 400,
            height: 400
        })

        var values = [xtwo, xone, xzero]

        var colours = ['#FA0', '#0AF', '#AF0']

        var data = []

        var yOffset = 0

        //Process the data

        for (var i = 0; i < values.length; i++) {

            var datum = {

                value: values[i],
                colour: colours[i],
                x: 0,
                y: yOffset

            }

            yOffset += values[i]

            data.push(datum)

        }

        yRange2 = d3.scale.linear().range([canvas.height - MARGINS.top, MARGINS.bottom]).domain([0, 5]),

            //setup y
            yAxis = d3.svg.axis()
            .scale(yRange2)
            .tickSize(5)
            .orient("left")
            .tickSubdivide(true);

        var bars = canvas.selectAll('rect').data(data)

        bars
            .enter()
            .append('rect')
            .attr({
                width: 30,
                height: function(d) {
                    return d.value
                },
                y: function(d) {
                    return d.y
                }
            })
            .style({
                fill: function(d) {
                    return d.colour
                }
            })

这是完整的代码：jsfiddle.net/tqj5maza/6/