javascript - 显示图表

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