import React, { useEffect, useState, useRef } from 'react';
import { select, line, curveCardinal } from 'd3';
const Record = () => {
  const [data, setData] = useState([30, 40, 50, 60, 80]);
  const lineRef = useRef();
  useEffect(() => {
    
    const svgLine = select(lineRef.current);
    const myLine = line()
      .x((value, index) => index * 50)
      .y(value => 150 - value)
      .curve(curveCardinal);
    svgLine
      .selectAll('path')
      .data([data])
      .join('path')
      .attr('d', value => myLine(value))
      .attr('fill', 'none')
      .attr('stroke', 'blue');
    // 선 그래프
  }, [data]);
  return (
    <div>
      <svg ref={lineRef}></svg>
      <button
        onClick={() => {
          setData(data.map(el => el + 5));
        }}
      >
        increase + 5
      </button>
      <button
        onClick={() => {
          setData(data.map(el => el - 5));
        }}
      >
        decrease - 5
      </button>
      <button
        onClick={() => {
          setData(data.filter(el => el > 35));
        }}
      >
        filter over 35
      </button>
    </div>
  );
};

export default Record;