调整d3图表的轴线具有正值和负值

Question

您好我尝试使用类似的图表：http://jsfiddle.net/chrisJamesC/tNdJj/4/

我想在svg中绘制一个可能为负值的线图，我想要jsfiddle的同一轴。

我把我的代码放在这里：

var lineData = [10,2,3,4,-9,12,1000,-1000,12,22,15]; 

var svg = d3.select("#chart_diff");

 var margin = {top: 30, right: 10, bottom: 10, left: 30},
    width = 360 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

    xRange =  d3.scale.linear().range([0,width]).domain([0,lineData.length]);

var yMax = d3.max(lineData, function (d) { return d;});

    yRange = d3.scale.linear()
            .range([height, 0])
       .domain([-yMax, yMax]);

    xAxis = d3.svg.axis()
    .scale(xRange)
    .tickSize(5)
    .tickSubdivide(true),

    yAxis = d3.svg.axis()
    .scale(yRange)
    .tickSize(5)
    .orient("left")
    .tickSubdivide(true);


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

    svg.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + margin.left + ",0)")
    .call(yAxis);

    svg.selectAll("g")
    .style("stroke-width","3px");

    var lineFunc = d3.svg.line()
    .x(function(d,i) {
        return xRange(i);
    })
    .y(function(d) {
        return yRange(d);
    })
    .interpolate('linear');

    svg.append('svg:path')
    .attr('d', lineFunc(lineData))
    .attr('stroke', 'blue')
    .attr('stroke-width', 2)
    .attr('fill', 'none');

使用jsfiddle：http://jsfiddle.net/0zj76je5/

我希望有人能帮助我！