How to match data points in D3.js to match x-axis? -

i try adapt following script. unfortunately can not match data points legend on x-axis? how can move data points / line right match legend on x-axis? source is: http://mund-consulting.com/blog/visualizing-web-page-views-using-d3js/

<script src="http://d3js.org/d3.v3.min.js"></script> <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> <script>         var margin = { top: 40, right: 20, bottom: 30, left: 40 },             width = 900,             height = 400;          var x = d3.scale.ordinal()             .rangeroundbands([0, width], .1);          var y = d3.scale.linear()             .range([height, 0]);          var xaxis = d3.svg.axis()             .scale(x)             .orient("bottom");          var yaxis = d3.svg.axis()             .scale(y)             .orient("left");          var tip = d3.tip()           .attr('class', 'd3-tip')           .offset([-10, 0])           .html(function (d) {               return "<strong>"+d.monthname+": </strong>                       <span style='color:black'>" + d.pageviews + "</span>";           })          var svg = d3.select("body").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 + ")");          svg.call(tip);          d3.csv("mc_monthly_pageview_2014.csv", function (error, data) {             x.domain(data.map(function (d) { return d.monthname; }));             y.domain([0, d3.max(data, function (d) { return d.pageviews; })]);              svg.append("g")                 .attr("class", "x axis")                 .attr("transform", "translate(0," + height + ")")                 .call(xaxis);              svg.append("g")                 .attr("class", "y axis")                 .call(yaxis)               .append("text")                 .attr("transform", "rotate(-90)")                 .attr("y", 6)                 .attr("dy", ".71em")                 .style("text-anchor", "end")                 .text("page views");              var line = d3.svg.line()                  .x(function (d) { return x(d.monthname); })                  .y(function (d) { return y(d.pageviews); });              svg.selectall("path.line")                     .data(data)                     .enter()                     .append("path")                     .attr("class", "line")                     .attr("d", line(data));              svg.selectall("circle")                 .data(data)                 .enter().append("circle")                 .attr("class", "dot")                 .attr("cx", function (d) { return x(d.monthname); })                 .attr("cy", function (d) { return y(d.pageviews); })                 .attr("r", 4.5)                 .on('mouseover', tip.show)                 .on('mouseout', tip.hide);         });  </script> 

i found solution.

exchange

var x = d3.scale.ordinal()             .rangeroundbands([0, width], .1); 

with

var x = d3.scale.ordinal()                       .rangepoints([0, width]);