resusuable linechart sample (in es6)

linechart.js

function lineplot(){
  var width = 500,
      height = 500,
      margins = {top: 40, bottom: 40, left:40, right:40},
      line = d3.svg.line().x(X).y(Y);

  var xScale, yScale, xAxis, yAxis;

  // The x-accessor for the path generator; xScale ∘ xValue.
  function X(d, i) {
    return xScale(i)
  }

  function Y(d){
    return yScale(d)
  }

  function chart(selection){
    var svg, lineSVG, xAxisSVG, yAxisSVG;

    function drawXAxis(svg){
      xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom");
      svg.call(xAxis);
    }

    function drawYAxis(svg){
      yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");
      svg.call(yAxis);
    }

    function setScales(data){
      let maxY,
          maxX;
      //check if data is one series or a multimple series
      if(Array.isArray(data[0])){
        maxX = data[0].length;
        maxY = d3.max(data.map(arr => {
          return d3.max(arr)
        }))
      }else{
        maxX = data.length
        maxY = d3.max(data)
      }
      xScale = d3.scale.ordinal().rangeBands([0, (width - margins.left - margins.right)]).domain(d3.range(maxX));
      yScale = d3.scale.linear().range([(height - margins.bottom - margins.top), margins.top]).domain([0, 1.2 * maxY]);

    }

    function drawLines(data, svg){
      let line = d3.svg.line().x(X).y(Y);
      let lines = svg.selectAll('path.data-line').data(data);
      lines.enter().append('path').attr('class', 'data-line');
      lines.attr('d', line).attr("fill", "none");
      lines.exit().remove()
    }


    selection.each((data) => {

      console.log(data, this, this.selectAll("svg.linechart"))
      //select the svg if it exists
      //svg = d3.select(this).selectAll("svg.linechart").data([data]);
      svg = this.selectAll("svg.linechart").data([data]);
      //or add a new one if not
      var newSVG = svg.enter().append('svg').attr('class', 'linechart');

      lineSVG = newSVG.append("g").attr('class', 'lines')
        .attr('transform', `translate(${margins.left} ,${margins.top})`);

      xAxisSVG = newSVG.append('g').attr('class', 'x axis')
        .attr('transform', `translate( ${margins.left} , ${height - margins.bottom})`);

      yAxisSVG = newSVG.append('g').attr('class', 'y axis')
        .attr('transform', `translate( ${margins.left} , ${margins.top})`);

      svg.attr("width" , width)
        .attr("height", height);

      let plottingData = data;
      setScales(data);
      drawXAxis(svg.select('.x.axis'));
      drawYAxis(svg.select('.y.axis'));
      if(!Array.isArray(data[0])){
        plottingData = [data]
      }
      drawLines(plottingData, svg.select('g.lines'));

    })
  }



  //getters and setters
  chart.width = function(val) {
    if (!arguments.length) {
      return width;
    }
    width = val;
    return chart;
  };

  chart.height = function(val) {
    if (!arguments.length) {
      return height;
    }
    height = val;
    return chart;
  };

  chart.margins = function(val) {
    if (!arguments.length) {
      return margins;
    }
    margins = val;
    return chart;
  };

  chart.xAxis = function(axis){
    if (!arguments.length) {
      return xAxis
    }

    xAxis = axis;
    return chart;
  };

  chart.yAxis = function(axis){
    if (!arguments.length) {
      return yAxis
    }
    yAxis = axis;
    return chart;
  };

  return chart
}


export {lineplot}