d3 v4 x-axis long labels are half hidden - d3.js

Question

I am working on sample responsive d3 v4 bar chart, here the x-axis labels are bit long so it is not fully visible in the chart. Please check the Fiddle code: http://jsfiddle.net/NayanaDas/w13y5kts/4/
JavaScript code:
// set the dimensions and margins of the graph
var margin = {
top: 20,
right: 20,
bottom: 30,
left: 40
},
width = 550 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
// set the ranges
var x = d3.scaleBand()
.range([0, width])
.padding(0.1);
var y = d3.scaleLinear()
.range([height, 0]);
//define tooltip
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([20, 0])
.html(function(d) {
return "<strong>Sales:</strong> <span style='font-weight:normal;color:red'>" + d.sales + "</span>";
});
// append the svg object to the body of the page
// append a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("#container").append("svg")
//.attr("width", width + margin.left + margin.right)
//.attr("height", height + margin.top + margin.bottom)
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 550 300")
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")")
.call(tip);
// Add background color to the chart
svg.append("rect")
.attr("x", 0)
.attr("y", 0)
.attr("width", width)
.attr("height", height)
.attr("class","backbar");
// get the data
//d3.csv("sales.csv", function(error, data) {
// if (error) throw error;
var data = d3.csvParse(d3.select('#data_csv').text());
console.log(data);
// format the data
data.forEach(function(d) {
d.sales = +d.sales;
});
// Scale the range of the data in the domains
x.domain(data.map(function(d) {
return d.name;
}));
y.domain([0, d3.max(data, function(d) {
return d.sales;
})]);
// append the rectangles for the bar chart
svg.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) {
return x(d.name);
})
.attr("width", x.bandwidth())
.attr("y", function(d) {
return y(d.sales);
})
.attr("height", function(d) {
return height - y(d.sales);
})
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
// add the x Axis
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x))
.selectAll("text")
.style("text-anchor", "end")
.style("fill", "#000")
.attr("dx", "-.8em")
.attr("dy", "-.55em")
.attr("transform", "rotate(-50)" );
// add the y Axis
svg.append("g")
.call(d3.axisLeft(y));
// add y-axis label
svg.append("text")
.attr("text-anchor", "middle") // this makes it easy to centre the text as the transform is applied to the anchor
.attr("transform", "translate("+ (-margin.left/2) +","+(height/2)+")rotate(-90)") // text is drawn off the screen top left, move down and out and rotate
.text("Hours");
//});
$('#expandbtn').click(function (e) {
$("#container").css("height","100%");
$('#box').addClass('panel-fullscreen show');
$('#compressbtn').removeClass("hide").addClass("show");
$('#expandbtn').removeClass("show").addClass("hide");
});
$('#compressbtn').click(function (e) {
$("#container").css("height","480px");
$('#box').removeClass('panel-fullscreen');
$('#expandbtn').removeClass("hide").addClass("show");
$('#compressbtn').removeClass("show").addClass("hide");
});
I have also added two buttons, on clicking expand button the chart will be displayed in full screen mode and on clicking compress button, chart will be back in normal size. Don't know if that has affected the display of x-axis labels. How can I make the long labels view-able?

Answer 1

Change your svg viewBox attribuite to 0 0 550 550.
The first two values are the X and Y coordinates of the upper left corner of the displayed area, the last two are the width and height. viewBox is set only by attribute.
How it works
Also check what is preserveAspectRatio values and how they work