Funes

const dimensions = {
  width: window.innerWidth * 0.8,
  height: 600,
  graphWidth: 0,
  graphHeight: 0,
  margin: {
    left: 100,
    right: 30,
    top: 30,
    bottom: 100,
  },
};

dimensions.graphWidth =
  dimensions.width - dimensions.margin.left - dimensions.margin.right;
dimensions.graphHeight =
  dimensions.height - dimensions.margin.top - dimensions.margin.bottom;

// canvas
let svg = d3
  .select('#wrapper')
  .append('svg')
  .attr('width', dimensions.width)
  .attr('height', dimensions.height)
  .style('display', 'block')
  .style('margin', '0 auto');

const rootGroup = svg
  .append('g')
  .attr(
    'transform',
    `translate(${dimensions.margin.left}, ${dimensions.margin.top})`,
  );

// scales
const timeParser = d3.timeParse('%Y.%m'); // 시간 데이터를 d3가 이해하도록 설정해주는 내장 함수
const xAccessor = d => timeParser(d.time); // timeParse 함수로 데이터를 감싼다

const xScale = d3
  .scaleTime()
  .domain(d3.extent(yearData, xAccessor)) // domain: 입력값의 범위 [최소값, 최대값]
  .range([0, dimensions.graphWidth]); // range: 출력값의 범위 [최소값, 최대값]

const yScale = d3
  .scaleLinear()
  .domain(d3.extent(yearData, yAccessor))
  .range([dimensions.graphHeight, 0]); // <-- yScale은 예외적으로 범위를 뒤집는다.
// [최소값, 최대값]으로 입력하면 그래프가 뒤집혀 출력되기 때문이다

// line
const lineGenerator = d3
  .line() // 라인을 그린다
  .x(d => xScale(xAccessor(d))) // 각 포인트의 x 좌표
  .y(d => yScale(yAccessor(d))) // 각 포인트의 y 좌표
  .curve(d3.curveMonotoneX); // 곡률 스타일 설정

// Join new data
const line = rootGroup
  .selectAll('.lineTest') // 가상선택자 선택
  .data([yearData], yAccessor) // 데이터 주입
  .enter() // 가상선택자 생성 시작
  .append('path') // 가상 path 엘리먼트 생성
  .attr('class', 'lineTest') // path 엘리먼트에 아까 입력한 class를 입력함으로써 전체 선택을 활성화
  .attr('d', lineGenerator(yearData)) // 라인 생성
  .attr('fill', 'none') // 라인을 말 그대로 선만 남기기 위해 너비 영역을 색칠하지 않게 함
  .attr('stroke', '#137CBD') // 선 색칠
  .attr('stroke-width', '5px'); // 선 두께 설정

const xAxisGenerator = d3.axisBottom().scale(xScale);

const yAxisGenerator = d3.axisLeft().scale(yScale).ticks(5); // tick: 눈금 갯수

const xAxis = rootGroup
  .append('g')
  .attr('class', 'x-axis')
  .attr('transform', `translate(0, ${dimensions.graphHeight})`) // x축을 바닥으로 내리기 위한 설정
  .call(xAxisGenerator);

const yAxis = rootGroup
  .append('g')
  .attr('class', 'y-axis')
  .call(xAxisGenerator);