D3JsDay06这包什麽馅，原来是折线—绘制折线图

这次相比长条图使用多一点的资料，阵列如下并且一样先宣告svg变数绘制一个宽800高450的画布

const ary = [130,45,239,20,30,246,72];
const svg = d3.select("body")
    .append("svg")
    .attr("width",800)
    .attr("height",450);

我们先绘制折线图上面的点与上一个长条图的概念类似只不过这次X取的位置是起始点设为30然後间距设为40，一样使用for回圈绘制程序码如下

for (let i = 0; i <ary.length;i++){
    svg.append("circle")
    .attr("cx",30+40*i)
    .attr("cy",450-ary[i])
    .attr("r",3)
    .attr("fill","green");
 }

此时你会看到的图应该是长这样

从画布的最下方开始往上到点的垂直距离会表现出阵列当中的数值

接下来我们要加入线

我们可以尝试着先加入一条线试试看，起始位置从最左下方开始
加入在for回圈外面

 svg.append("line")
    .attr("x1",0)
    .attr("y1",450)
    .attr("x2",30)
    .attr("y2",450-130)
    .style("stroke","black")
    .style("stroke-width","1px");

起始点x1是0而最下方的点就是画布的高，因此y1是450
然後对应到第一个点的位置x是30、y是450-130也就是减去阵列的第一个数值所以x2是30、y2是320。
会看到图长这样

我们尝试着画第二条线来观察这中间有什麽规则

 svg.append("line")
  .attr("x1",30)
  .attr("y1",450-130)
  .attr("x2",30+40)
  .attr("y2",450-45)
  .style("stroke","black")
  .style("stroke-width","1px");

这时候图片会长类似这样

然後我们会发现线段x1和y1的起始位置是来自於上一个点，第一条线段的起始位置是0跟450，x2和y2是当前的点位置
所以我们可以先宣告一个lastX和lastY并且给定初始值并且在for回圈绘制线段完之後将lastX和lastY表示当前的点的位置加入进去，最後在for回圈判断是不是跑最後一圈，做为线断结束到0的位置

程序码如下

let ary = [130,45,239,20,30,246,72];
let svg = d3.select("body")
            .append("svg")
            .attr("width",800)
            .attr("height",450);
let lastX=0;
let lastY=450;

for (let i = 0; i <ary.length;i++){
  svg.append("circle")
  .attr("cx",30+40*i)
  .attr("cy",450-ary[i])
  .attr("r",3)
  .attr("fill","green");

  svg.append("line")
      .attr("x1",lastX)
      .attr("y1",lastY)
      .attr("x2",30+40*i)
      .attr("y2",450-ary[i])
      .style("stroke","black")
      .style("stroke-width","1px");
  lastX =30+40*i;
  lastY = 450-ary[i];
  
  if(i==ary.length-1){
      svg.append("line")
      .attr("x1",lastX)
      .attr("y1",lastY)
      .attr("x2",30+40*(i+1))
      .attr("y2",450)
      .style("stroke","black")
      .style("stroke-width","1px");
  lastX =30+40*i;
  lastY = 450-ary[i];
  }
}

绘制完成图片大概会长这样