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];
        });