顯示圖形

Question

下面是代碼來創建圖形

var margin = { 
    top: 20, 
    right: 20, 
    bottom: 30, 
    left: 50 
}, 
width = 960 - margin.left - margin.right, 
height = 500 - margin.top - margin.bottom; 

Answer 1

先給域於Y標尺：

y.domain([d3.min(newDataArray, function(d) { 
    return d3.min([d.fit, d.upr, d.lwr]);//min of all 3 
    }), d3.max(newDataArray, function(d) { 
    return d3.max([d.fit, d.upr, d.lwr]);//max of all 3 
    })]); 

二創造有線條生成所有三種：

var linefit = d3.svg.line() 
    .x(function(d, i) { 
     console.log(d); 
     return x(i); 
    }) 
    .y(function(d) { 
     return y(d.fit); 
    }); 
    var lineupr = d3.svg.line() 
    .x(function(d, i) { 
     console.log(d); 
     return x(i); 
    }) 
    .y(function(d) { 

     return y(d.upr);//give upr 
    }); 
    var linelwr = d3.svg.line() 
    .x(function(d, i) { 
     console.log(d); 
     return x(i); 
    }) 
    .y(function(d) { 

     return y(d.lwr);//get y for lwr 
    }); 

最後用不同的顏色創建3條路徑並調用它們各自的線條生成器。

//line for fit 
    svg.append("path") 
    .datum(newDataArray) 
    .attr("class", "line") 
    .attr("d", function(d) { 
     return linefit(d) 
    }) 
    .style("stroke", "red"); 
    //line for upr 
    svg.append("path") 
    .datum(newDataArray) 
    .attr("class", "line") 
    .attr("d", function(d) { 
     return lineupr(d) 
    }) 
    .style("stroke", "blue"); 
    //line for lwr 
     svg.append("path") 
    .datum(newDataArray) 
    .attr("class", "line") 
    .attr("d", function(d) { 
     return linefit(d) 
    }) 
    .style("stroke", "red"); 

    svg.append("path") 
    .datum(newDataArray) 
    .attr("class", "line") 
    .attr("d", function(d) { 
     return linelwr(d) 
    }) 
    .style("stroke", "green"); 

工作代碼here