显示图形

Displaying a graph

本文关键字：图形 显示图 显示      更新时间：2023-09-26

下面是创建图形的代码

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

首先给出一个 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");

工作代码在这里

相关文章：