Scaling both x and y with xScale

http://stackoverflow.com/questions/23967118/d3-horizontal-stacked-bar-chart-axis-cut-off

by Nivaldo

CSS

.axis {
    font-size: 14px;
}
#h {
}

JavaScript

var margin = {
    top: 12,
    left: 15,
    right: 80, // test with different values
    bottom: 14
};

var w = 500 - margin.left - margin.right;
var h = 300 - margin.top - margin.bottom;

var dataset = [
    [{
        x: 0,
        y: 20 // test with different values
    }],
    [{
        x: 0,
        y: 30 // test with different values
    }],

    [{
        x: 0,
        y: 50 // test with different values
    }]
];

//Set up stack method
var stack = d3.layout.stack();

//Data, stacked
stack(dataset);

//Set up scales
var xScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function (d) {
        return d3.max(d, function (d) {
            return d.y0 + d.y;
        });
    })])
    .range([0, w]);

//var yScale = d3.scale.ordinal()
    //.domain(d3.range(dataset[0].length))
    //.rangeRoundBands([0, w], 0.05);

//Easy colors accessible via a 10-step ordinal scale
var colors = d3.scale.category10();
//or make your own colour palet
var color = d3.scale.ordinal()
    .range(["#1459D9", "#148DD9", "#87ceeb", "#daa520"]);

// good site for colour codes http://www.colorpicker.com/113EF2

//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w + margin.left + margin.right)
    .attr("height", h + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Add a group for each row of data
var groups = svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .style("fill", function (d, i) {
    return color(i);
});

// Add a rect for each data value
var rects = groups.selectAll("rect")
    .data(function (d) {
        return d;
    })
  .enter()
  .append("rect")
    .attr("x", function (d) {
        return xScale(d.y0);
    })
    .attr("y", 50)
    .attr("height", 50)
    .attr("width", function (d) {
        return xScale(d.y);
    })

//Add an axis
var xAxis = d3.svg.axis()
    .scale(xScale);

svg.append("g")
    .call(xAxis);