y轴与图形不对齐

Question

为什么y轴与图形不对齐。图形响应高度超过y轴数据。 预期输出不应从绘图区域/ y轴高度超出图形高度。

这是我的JavaScript：

function getD3Chart(chartData){
    var formattime = d3.time.format("%a-%d");
    var widther = window.outerWidth - 35;
    if(widther > 750){
            widther = 430;
        }
    var margin = {top: 20, right: 20, bottom: 30, left: 30},
        width = widther - margin.left - margin.right,
        height = 235 - margin.top - margin.bottom;


    var parseDate = d3.time.format("%d-%b-%Y:%H").parse,
        bisectDate = d3.bisector(function(d) { return d.date; }).left,
        formatValue = d3.format(",.3f"),   // its use for after decimal we can show number of fractional digit
        formatCurrency = function(d) { return  1000*formatValue(d)+"ms, "; };

    var x = d3.time.scale()
        .range([0, width]);

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .innerTickSize(0)
        .outerTickSize(0)
        .tickPadding(10)
        .tickFormat(formattime)
        .ticks(7);  

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .innerTickSize(0)
        .outerTickSize(0);



    var area = d3.svg.area()
        .x(function(d) { return x(d.date); })
        .y0(height)
        .y1(function(d) { return y(d.avgResponse); });


    var line = d3.svg.line()
        .x(function(d) { return x(d.date); })
        .y(function(d) { return y(d.avgResponse); });

    var svg = d3.select("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 data = chartData.map(function(d) {
        return{
            date : parseDate(d.date),
            avgResponse : d.avgResponse

        };
    });

    data.sort(function(a, b) {
        return a.date - b.date;
    });


x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.avgResponse; })]);



    svg.append("path")
       .data([data])
       .attr("class", "area")
       .attr("d", area);

       svg.append("text")
               .attr("transform", "rotate(-90)")
               .attr("y", 6)
               .attr("dy", ".71em")
               .style("text-anchor", "end")
                .style("position", "absolute")
                 .style("font-weight", "bold")
               .text("Avg ResponseTime in ms");

        svg.append("g")
               .attr("class", "x axis")
               .attr("transform", "translate(0," + height + ")")
                .style("position", "absolute")
               .call(xAxis);

           svg.append("g")
               .attr("class", "y axis")
                .style("position", "absolute")
               .call(yAxis);


    svg.append("path")
        .datum(data)
        .attr("class", "line")
        .attr("d", line);

    var focus = svg.append("g")
        .attr("class", "focus")
        .style("display", "none");

    focus.append("circle")
        .attr("r", 6.5);

    focus.append("text")
        .attr("x", 9)
        .attr("dy", ".35em");

   svg.append("rect")
       .attr("class", "overlay")
        .attr("width", width)
        .attr("height", height)
       .attr("background-color", "#EDE3D1")
        .attr('opacity', 0)
        .on("mouseover", function() { focus.style("display", null); })
        .on("mouseout", function() { focus.style("display", "none"); })
        .on("mousemove", mousemove);

    function mousemove() {

        var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
        var x0 = x.invert(d3.mouse(this)[0]),
            i = bisectDate(data, x0, 1),
            d0 = data[i - 1],
            d1 = data[i],
            d = x0 - d0.date > d1.date - x0 ? d1 : d0;
        var hour = d.date.getHours();   
         hour = (hour < 10)? "0"+hour : hour;
        focus.attr("transform", "translate(" + x(d.date) + "," + y(d.avgResponse) + ")");
        focus.select("text").text(formatCurrency(d.avgResponse) +" "+months[d.date.getMonth()]+" "+ d.date.getDate()+"th " +hour+":00h");
        focus.select("text").attr("class", "graphDataClass");
        if(d3.mouse(this)[0] > 260) {
            focus.select("text").attr("x", -120);
        }else{
            focus.select("text").attr("x", 9);
        }
    }


}