d3v4 折线图

使用d3jsv4开发一个折线图

//设置当前图表所需参数
const params = {
    id: "#box", 
    data: [4, 2, 3,2, 5, 6,1], 
    width:500,
    height:300,
    xAxis:{
        data: ["周1", "周2", "周3", "周4", "周5", "周6", "周日"]
    }
}

//开始生成line
function line({
    data,
    xAxis:xData=data,
    id,
    width,
    height}=params){
    //生成折线图函数
    //设置关于padding默认参数
    let padding = params.padding || {
      left: 30,
      top: 30,
      bottom: 30,
      right: 30
    }
    //设置宽高
    let svg = d3.select(id).attr("width", width || 400).attr("height", height || 300);
    //添加线条
    let g = svg.append("g").attr("class", "svg-line").attr("width", width || 400).attr("height", height || 300)
    //比例尺
    let min = d3.min(data);
    let max = d3.max(data);
    let xScale = d3.scaleLinear().domain([0, xAxis.data.length - 1]).range([0, width - padding.left - 10]);
    let yScale = d3.scaleLinear().domain([max, min]).range([0, height - padding.bottom - 20]);
    //生成线条
    let line = d3.line().x(function (d, i) {
      return xScale(i)
    }).y(function (d) {
      return yScale(d)
    })
    //添加左侧刻度
    svg.append("g").attr("transform", "translate(30," + 20 + ")").call(d3.axisLeft(yScale))
    //添加下侧刻度尺  
    let lineTicks = d3.axisBottom(xScale) //设置刻度尺为下侧
      .ticks(xAxis.data.length) //设置刻度尺的长度
      .tickFormat(function (d, i) {
        return xData[i]
      }) //自定义刻度尺的内容
    svg.append("g").attr("transform", "translate(30," + (height - padding.bottom) + ")")
      .call(lineTicks)
    //添加线
    g.append("path")
      .datum(data)
      .attr("transform", "translate(" + padding.left + "," + 20 + ")")
      .attr("fill", 'none')
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
}
//调用方法生成
line(params)