d3.js学习（时间轴-多折线图）

根据项目的要求，利用d3.js画出x轴为时间轴，多条折线的折线图，看了官方的文档和很多参考资料才做了出来。所以想分享给程序猿朋友们。（网上找的基本上都不满足需求。只能靠自己一步一步写下来）

成果曲线图：

 

step1: 准备数据

//  数据，{ x： 为时间轴，y： 相对应的值}

var trendData = [

  [{ 'x':'2018-02-01','y':1},{ 'x':'2018-02-02','y':6},{ 'x':'2018-02-03','y':11},{ 'x':'2018-02-04','y':15},{ 'x':'2018-02-05','y':16}],

  [{ 'x':'2018-02-01','y':2},{ 'x':'2018-02-02','y':7},{ 'x':'2018-02-03','y':12},{ 'x':'2018-02-04','y':17},{ 'x':'2018-02-05','y':18}],

  [{ 'x':'2018-02-01','y':3},{ 'x':'2018-02-02','y':8},{ 'x':'2018-02-03','y':13},{ 'x':'2018-02-04','y':11},{ 'x':'2018-02-05','y':10}],

  [{ 'x':'2018-02-01','y':4},{ 'x':'2018-02-02','y':9},{ 'x':'2018-02-03','y':14},{ 'x':'2018-02-04','y':30},{ 'x':'2018-02-05','y':20}]

];

//    曲线颜色

var trendColor = ['#0c88ff','#0000ff','#1d2088','#009944'];

// 设置上面lable标签

var trendLable = ['开门总数','手机开门时','刷卡开门时','人脸识别开门时']

 

step2: 画曲线

var draw= {

  openDoorTrend: {

    // 初始化数据

    openDoorData: {

      w3: $("#trendSvg").width(),  // 获取装曲线div 盒子的宽度，自适应屏幕大小

      h3: $("#trendSvg").height(),  // 获取装曲线div盒子的高度，自适应屏幕大小

      svg3: d3.select("#trendSvg").append("svg"),

      svg1: d3.select("#table-border").append("svg") // 在装label标签的div盒子里添加一个svg，注意一个盒子里只能装一个svg，不能添加多个

    }，

    

   /*  label */

    openDoorTrendLabel: function () {

      var svg3 = draw.openDoorTrend.openDoorData.svg1  

      var w3 = $("#table-border").width()