d3.js折線圖

1、思路：

首先還是要先建立座標軸（定義域、值域、刻度尺、背景線等），然後直線生成器，開始畫線，最後添加一下修飾等

代碼如下：

數據準備，svg的大小，及佈局內邊距等

const width = 400;
      const height = 400;
      const dataset = [
        {
          country: "china",
          gdp: [
            [2000, 11920],
            [2001, 13170],
            [2002, 14660],
            [2003, 16800],
            [2004, 19440],
            [2005, 22780]
          ]
        },
        {
          country: "japan",
          gdp: [
            [2000, 12920],
            [2001, 13470],
            [2002, 19660],
            [2003, 12800],
            [2004, 12440],
            [2005, 20780]
          ]
        }
      ];

      const padding = { top: 30, right: 30, bottom: 30, left: 50 };
      // 計算 最大值
      let gdpmax = 0;
      for (let i = 0; i < dataset.length; i++) {
        let currGdp = d3.max(dataset[i].gdp, function(d) {
          return d[1];
        });
        if (currGdp > gdpmax) {
          gdpmax = currGdp;
        }
      }

這裏對座標軸的建立，就不介紹了，有問題參考：https://blog.csdn.net/lbPro0412/article/details/100540280

直線生成器：

      // 直線生成器
      let linePath = d3
        .line()
        .x(function(d) {
          return xScale(d[0]);
        })
        .y(function(d) {
          return yScale(d[1]);
        })
        //曲線  d3.curveCardinal.tension(0.4) 默認值是0 值越小彎曲程度越大
        .curve(d3.curveCardinal);

折線：

      //開始畫 折線
      svg
        .selectAll("path")
        .data(dataset)
        .enter()
        .append("path")
        .attr(
          "transform",
          "translate(" + padding.left + "," + padding.top + ")"
        )
        .attr("d", function(d) {
          return linePath(d.gdp);
        })
        .attr("fill", "none")
        .attr("stroke-width", 3)
        .attr("stroke", function(d, i) {
          return colors[i];
        });