D3Js Bar Chart Bars Starting Way After beginning of X-Axis - d3.js

Question

As the title say, I am creating a bar chart using D3Js. What do I have to change in the following snippet for the bars to start at the beginning of the X-Axis?
var allBarsDatasets = [
{
"xAxisTickValue": "10-1",
"barValue": 18
},
{
"xAxisTickValue": "10-2",
"barValue": 17
},
{
"xAxisTickValue": "10-3",
"barValue": 17
},
{
"xAxisTickValue": "10-4",
"barValue": 19
},
{
"xAxisTickValue": "11-1",
"barValue": 19
},
{
"xAxisTickValue": "11-2",
"barValue": 14
},
{
"xAxisTickValue": "11-3",
"barValue": 18
},
{
"xAxisTickValue": "11-4",
"barValue": 12
},
{
"xAxisTickValue": "12-1",
"barValue": 16
},
{
"xAxisTickValue": "12-2",
"barValue": 15
},
{
"xAxisTickValue": "12-3",
"barValue": 14
},
{
"xAxisTickValue": "12-4",
"barValue": 15
},
{
"xAxisTickValue": "13-1",
"barValue": 16
},
{
"xAxisTickValue": "13-2",
"barValue": 17
},
{
"xAxisTickValue": "13-3",
"barValue": 12
},
{
"xAxisTickValue": "13-4",
"barValue": 17
},
{
"xAxisTickValue": "14-1",
"barValue": 17
},
{
"xAxisTickValue": "14-2",
"barValue": 16
},
{
"xAxisTickValue": "14-3",
"barValue": 14
},
{
"xAxisTickValue": "14-4",
"barValue": 15
},
{
"xAxisTickValue": "15-1",
"barValue": 15
},
{
"xAxisTickValue": "15-2",
"barValue": 19
},
{
"xAxisTickValue": "15-3",
"barValue": 17
},
{
"xAxisTickValue": "15-4",
"barValue": 12
},
{
"xAxisTickValue": "16-1",
"barValue": 13
},
{
"xAxisTickValue": "16-2",
"barValue": 17
},
{
"xAxisTickValue": "16-3",
"barValue": 17
},
{
"xAxisTickValue": "16-4",
"barValue": 19
},
{
"xAxisTickValue": "17-1",
"barValue": 18
},
{
"xAxisTickValue": "17-2",
"barValue": 13
},
{
"xAxisTickValue": "17-3",
"barValue": 17
},
{
"xAxisTickValue": "17-4",
"barValue": 16
},
{
"xAxisTickValue": "18-1",
"barValue": 10
},
{
"xAxisTickValue": "18-2",
"barValue": 15
},
{
"xAxisTickValue": "18-3",
"barValue": 17
},
{
"xAxisTickValue": "18-4",
"barValue": 17
},
{
"xAxisTickValue": "19-1",
"barValue": 18
},
{
"xAxisTickValue": "19-2",
"barValue": 14
},
{
"xAxisTickValue": "19-3",
"barValue": 16
},
{
"xAxisTickValue": "19-4",
"barValue": 13
},
{
"xAxisTickValue": "20-1",
"barValue": 15
},
{
"xAxisTickValue": "20-2",
"barValue": 17
},
{
"xAxisTickValue": "20-3",
"barValue": 14
},
{
"xAxisTickValue": "20-4",
"barValue": 16
},
{
"xAxisTickValue": "21-1",
"barValue": 18
},
{
"xAxisTickValue": "21-2",
"barValue": 14
},
{
"xAxisTickValue": "21-3",
"barValue": 17
},
{
"xAxisTickValue": "21-4",
"barValue": 15
},
{
"xAxisTickValue": "22-1",
"barValue": 16
},
{
"xAxisTickValue": "22-2",
"barValue": 17
},
{
"xAxisTickValue": "22-3",
"barValue": 16
},
{
"xAxisTickValue": "22-4",
"barValue": 16
},
{
"xAxisTickValue": "23-1",
"barValue": 16
},
{
"xAxisTickValue": "23-2",
"barValue": 16
},
{
"xAxisTickValue": "23-3",
"barValue": 15
},
{
"xAxisTickValue": "23-4",
"barValue": 16
},
{
"xAxisTickValue": "24-1",
"barValue": 15
},
{
"xAxisTickValue": "24-2",
"barValue": 15
},
{
"xAxisTickValue": "24-3",
"barValue": 17
},
{
"xAxisTickValue": "24-4",
"barValue": 13
},
{
"xAxisTickValue": "6-1",
"barValue": 16
},
{
"xAxisTickValue": "6-2",
"barValue": 16
},
{
"xAxisTickValue": "6-3",
"barValue": 16
},
{
"xAxisTickValue": "6-4",
"barValue": 15
},
{
"xAxisTickValue": "7-1",
"barValue": 12
},
{
"xAxisTickValue": "7-2",
"barValue": 18
},
{
"xAxisTickValue": "7-3",
"barValue": 15
},
{
"xAxisTickValue": "7-4",
"barValue": 18
},
{
"xAxisTickValue": "8-1",
"barValue": 16
},
{
"xAxisTickValue": "8-2",
"barValue": 15
},
{
"xAxisTickValue": "8-3",
"barValue": 17
},
{
"xAxisTickValue": "8-4",
"barValue": 16
},
{
"xAxisTickValue": "9-1",
"barValue": 17
},
{
"xAxisTickValue": "9-2",
"barValue": 14
},
{
"xAxisTickValue": "9-3",
"barValue": 18
},
{
"xAxisTickValue": "9-4",
"barValue": 18
}
];
// TODO: format labels and values
// rotate x-axis ticks; if number user shorter format
// use shorter format for y-axis values
// correctly position x-axis and y-axis labels
$("#chartDiv").html("");
var barColor = '#384a60';
// calculate total frequency by state for all segment.
var fD = allBarsDatasets.map(function(d){return [d.xAxisTickValue,d.barValue];});
/* var margin = {top: 20, right: 100, bottom: 30, left: 100},
width = 600 - margin.left - margin.right,
height = 310 - margin.top - margin.bottom; */
var margin = {top: 20, right: 100, bottom: 30, left: 100},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var padding = 100;
//create svg for histogram.
var svg = d3.select("#chartDiv").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom).append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
// create function for x-axis mapping.
var x = d3.scale.ordinal().rangeRoundBands([0, width], 0.1)
.domain(fD.map(function(d) { return d[0]; }));
// Add x-axis to the histogram svg.
svg.append("g").attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.svg.axis()
.scale(x)
.orient("bottom")
.innerTickSize(-height)
.outerTickSize(0)
.tickPadding(10));
// create function for y-axis mapping.
var yMin = d3.min(fD.map(function(d) { return d[1]; }));
var yMax = d3.max(fD.map(function(d) { return d[1]; }));
var y = d3.scale.linear().range([height, 0])
.domain([0, d3.max(fD, function(d) { return d[1]; })]);
var yScaleGridLines = d3.scale.linear()
.domain([yMin, yMax])
.range([height, 0]);
var yAxisGridLines = d3.svg.axis()
.scale(yScaleGridLines)
.orient("left")
.innerTickSize(-width)
.outerTickSize(0)
.tickPadding(10);
svg.append("g")
.attr("class", "y axis")
.call(yAxisGridLines);
// Create bars for histogram to contain rectangles and freq labels.
var bars = svg.selectAll(".bar").data(fD).enter()
.append("g").attr("class", "bar");
//create the rectangles.
bars.append("rect")
.attr("x", function(d) { return x(d[0]); })
.attr("y", function(d) { return y(d[1]); })
.attr("width", x.rangeBand())
.attr("height", function(d) { return height - y(d[1]); })
.attr('fill',barColor);
#chartDiv .axis path,
#chartDiv .axis line{
fill: none;
stroke: black;
}
#chartDiv .line{
fill: none;
stroke: blue;
stroke-width: 2px;
}
#chartDiv .tick text{
font-size: 12px;
}
#chartDiv .tick line{
opacity: 0.2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="chartDiv">
</div>
At first I thought it was a data issue, but I don't see anything odd in it. I also, tried removing attributes from the section where I set up the X-Axis, but it didn't work.

Answer 1

Thanks #AndrewReid for putting me on the right track. I figured the meaning of each arguments based on your comment to my question; the second argument is the space between bars and the third one is the padding between bars and the beginning and end of the X-Axis. The following values worked for my needs d3.scale.ordinal().rangeRoundBands([0, width], 0.1, 0)