D3图表放大和缩小时不应显示负片

Question

我正在使用带缩放功能的d3图表 缩小时，我不想在y轴上显示负值。我怎么能避免它。 即使我应该避免y轴值超过缩放中的实际值

例如： 我最好的y轴值是5000 当我缩小时，我不想看到像这样的5100,5500和6000 我怎么能避免这种情况。

感谢 Subash

这是我的代码

var margin = { top: 0, right: 45, bottom: 20, left: 0 },
        width = $('#realtimechart').width() - 40,
        height = 300;

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

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

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

    var xAxis = d3.svg.axis().scale(x).ticks(10).orient("bottom");

    var yAxis = d3.svg.axis().scale(y).ticks(8).orient("right");
    console.log(y)
    var zoom = d3.behavior.zoom().x(x).y(y).translate([0,0]).scale(1).scaleExtent([0, 1000]).on("zoom", refresh);

    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");

    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")
        .attr("transform", "translate(" + width + ", 0)")
        .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(0));

    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() {
        //$('#realtimechart').yAxis.scale().domain();

        console.log(d3.svg.axis().scale().domain());
        //console.log(i);
        if(i < 1000) {   
             i++;
            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);
        }        
    }