Javascript 用正值和负值调整d3图表线的轴

您好，我尝试制作类似的图表，如下所示：

我想在svg中绘制一个可能带有负值的折线图，并且我想要JSFIDLE的相同轴

我把代码放在这里：

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

使用JSFIDLE：

---

我希望任何人都能帮助我

你看到了吗？是的，我认为这个例子比我使用的方式好，谢谢你的链接：）