Overlapping Axis Ticks with Margin - d3.js

Question

My X-Axis tick number is scaling to the full width of the svg and not just the graph (without the margin area), so it overlaps.
http://i.stack.imgur.com/SHiIj.png The top image has margin so the labels are shown, the bottom one shows that with no margin, the ticks appear correctly
How can I make the X-axis ticks scale to the graph width instead of the svg width?
var margin = {top: 10, right: 0, bottom: 50, left: 0},
width = windowWidth * 0.28 - margin.left - margin.right,
height = 150 - margin.top - margin.bottom;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(4);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(4);
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.trials); });
var svg = d3.select("#data-graph").insert("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var masterLabelList = ['Total','Completed']
d3.tsv("/static/data.tsv" + '?time=' + new Date().getTime(), function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = new Date(+d.date);
});
var category = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {date: d.date, trials: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([
d3.min(category, function(c) { return d3.min(c.values, function(v) { return v.trials; }); }),
d3.max(category, function(c) { return d3.max(c.values, function(v) { return v.trials; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.style("fill", "#999999")
.call(xAxis);

Answer 1

Set margin's right property to a value greater than 0.
Then replace
var x = d3.time.scale()
.range([0, width]);
with
var x = d3.time.scale()
.range([0, width - margin.right]);