无法使D3 y轴和列沿x轴正确对齐

我现在正在处理的D3图有几个问题：

1. 我无法y axis在页面上正确对齐。这些数字超出了最左边的边界，因此无法看到。

2. 我希望条形图中使用的列在刻度线之间整齐地对齐，并且在两侧均匀间隔。

小提琴：http : //jsfiddle.net/bf1gf8ep/8/

D3.js

var barWidth = 70;
var width = (barWidth + 10) * 7;
var height = 200;
var data = [{"label" : "1/7yrs", "contract" : "111830.17", "annReturn" : "1.63%"},
            {"label" : "2/7yrs", "contract" : "115311.17", "annReturn" : "2.07%"},
            {"label" : "3/7yrs", "contract" : "118984.65", "annReturn" : "2.52%"},
            {"label" : "4/7yrs", "contract" : "122859.65", "annReturn" : "2.98%"},
            {"label" : "5/7yrs", "contract" : "126947.77", "annReturn" : "3.46%"},
            {"label" : "6/7yrs", "contract" : "131260.74", "annReturn" : "3.94%"},
            {"label" : "7/7yrs", "contract" : "135810.92", "annReturn" : "4.44%"}];

 var margin = { top: 20, right: 20, bottom: 20, left: 20 };

 var chart = d3.selectAll("body").append("svg:svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom + 20);

        var x = d3.scale.linear().domain([0, data.length]).range([0, width]);
        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").ticks(5);

  chart.append("g")
       .attr("class", "axis").call(xAxis)
       .attr("transform", "translate(0," + (height) + ")");

  chart.append("g")
       .attr("class", "axis")
       .attr("transform", "translate(" + 10 + ",0)")
       .call(yAxis);


x = d3.scale.linear().domain([0, data.length]).range([0, width]);
y = d3.scale.linear().domain([0, 135810.92 + 1000]).range([height, 0]);

chart.selectAll("rect")
    .data(data)
    .enter()
    .append("svg:rect")
    .attr("x", function (d, i) { return x(i); })
    .attr("y", function (d) { return y(d.contract); })
    .attr("height", function (d) { return height - y(d.contract); })
    .attr("width", barWidth)
    .attr("fill", "#2d578b");

chart.selectAll("text.contractInfo")
    .data(data)
    .enter()
    .append("svg:text")
    .attr("x", function(d, i) { return x(i) + barWidth; })
    .attr("y", function(d) { return y(d.contract); })
    .attr("dx", -barWidth / 2)
    .attr("dy", "1.2em")
    .attr("text-anchor", "middle")
    .text(function(d) { return d.contract; })
    .attr("fill", "white")
    .attr("class", "contractInfo");

chart.selectAll("text.yAxis")
    .data(data)
    .enter().append("svg:text")
    .attr("x", function (d, i) { return x(i) + barWidth; })
    .attr("y", height)
    .attr("dx", -barWidth / 2)
    .attr("dy", "15px")
    .attr("text-anchor", "middle")
    .attr("style", "font-size: 12; font-family; Helvetica, sans-serif")
    .text(function (d) { return d.label; })
    .attr("transform", "translate(0, 18)")
    .attr("class", "yAxis");

截屏