D3图表。不必要的y轴范围

Question

我使用过d3图表。我的数据范围是600到1400。 当onLoad时，图表显示正确的范围。 问题是，当我向下滚动时，它会像顶部4000，底部-2000一样消失。 我怎么能阻止这个。 范围显示不超过。

的问候， Subash

这是我的代码

var margin = {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
},
    width = 1000,
    height = 150;

d3.select("rect")
  .filter(function(d) { return d.value === max; })
  .classed("max", true);

var x = d3.time.scale()
    .domain(d3.extent(data, function (d) {
    return d.date;
}))
    .range([0, width]);

//var y = (d3.scale.linear().domain(['100', '1000']))

var y = d3.scale.linear()
    .domain(d3.extent(data, function (d) {
    return d.value;
}))
    .range([height, 0]);

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

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.hour)

//var xAxis = d3.svg.axis()
//    .scale(x)
//    .tickValues([1, 2, 3, 5, 8, 13, 21]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(5)

var zoom = d3.behavior.zoom().x(x).y(y).on("zoom", refresh);

var zoomRect = false;

d3.select("#zoom-rect").on("change", function () {
    zoomRect = this.checked;
});

var svg = d3.select("#realtimechart").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 + ")")
    .call(zoom)
    .append("g")
    .on("mousedown", function () {
    if (!zoomRect) return;
    var e = this,
        origin = d3.mouse(e),
        rect = svg.append("rect").attr("class", "zoom");
    d3.select("#realtimechart").classed("noselect", true);
    origin[0] = Math.max(0, Math.min(width, origin[0]));
    origin[1] = Math.max(0, Math.min(height, origin[1]));
    d3.select(window)
        .on("mousemove.zoomRect", function () {
        var m = d3.mouse(e);
        m[0] = Math.max(0, Math.min(width, m[0]));
        m[1] = Math.max(0, Math.min(height, m[1]));
        rect.attr("x", Math.min(origin[0], m[0]))
            .attr("y", Math.min(origin[1], m[1]))
            .attr("width", Math.abs(m[0] - origin[0]))
            .attr("height", Math.abs(m[1] - origin[1]));
    })
        .on("mouseup.zoomRect", function () {
        d3.select(window).on("mousemove.zoomRect", null).on("mouseup.zoomRect", null);
        d3.select("#realtimechart").classed("noselect", false);
        var m = d3.mouse(e);
        m[0] = Math.max(0, Math.min(width, m[0]));
        m[1] = Math.max(0, Math.min(height, m[1]));
        if (m[0] !== origin[0] && m[1] !== origin[1]) {
            zoom.x(x.domain([origin[0], m[0]].map(x.invert).sort()))
                .y(y.domain([origin[1], m[1]].map(y.invert).sort()));
        }
        rect.remove();
        refresh();
    }, true);
    d3.event.stopPropagation();
});


var make_x_axis = function () {
    return d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(5);
};

var make_y_axis = function () {
    return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(5);
};

svg.append("rect")
    .attr("width", width)
    .attr("height", height);

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

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

svg.append("g")
    .attr("class", "x grid")
    .attr("transform", "translate(0," + height + ")")
    .call(make_x_axis()
    .tickSize(-height, 0, 0)
    .tickFormat(""));

svg.append("g")
    .attr("class", "y grid")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat(""));

var clip = svg.append("svg:clipPath")
    .attr("id", "clip")
    .append("svg:rect")
    .attr("x", 0)
    .attr("y", 0)
    .attr("width", width)
    .attr("height", height);

var chartBody = svg.append("g")
    .attr("clip-path", "url(#clip)");

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

function refresh() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
    svg.select(".x.grid")
        .call(make_x_axis()
        .tickSize(-height, 0, 0)
        .tickFormat(""));
    svg.select(".y.grid")
        .call(make_y_axis()
        .tickSize(-width, 0, 0)
        .tickFormat(""));
    svg.select(".line")
        .attr("class", "line")
        .attr("d", line);
}