d3 + react 기초

d3는 데이터 시각화 라이브러리다.

데이터와 html요소를 바인딩하여 시각화한다.

깃허브 스타수 10위 언저리에 있다..!

기본 세팅

d3는 dom을 직접 조작하기 때문에 react의 state기반 렌더링과는 잘 어울리지 않는다.

때문에 역할을 분리해주어야 한다.

나는 계산과 좌표계산등은 d3가 하고 기타 html세팅과 같은 작업들은 react를 이용해서 하도록 분리해주었다.

컴포넌트의 기본 세팅은 다음과 같다.

const App = ({ data }) => {
  const containerRef = useRef();
  const wrapperRef = useRef();

  useEffect(() => {
    const svg = select(svgRef.curent);
    const container = select(containerRef.current);
    // 계산하기
  }, [data]);

  return (
    <div ref={containerRef}>
      <svg ref={svgRef} />
    </div>
  );
};

useRef로 svg와 div를 참조하여 useEffect내부에서 d3를 통해 계산한다.

css설정은 다음과 같다.

export const chartWrapper = styled.div`
  width: 100%;
  height: 700px;
  padding: 0 32px;
  box-sizing: border-box;
  & > svg {
    display: block;
    margin: auto;
    width: 100%;
  }
`;

나중에 반응형을 적용해주기 위해 container와 svg의 width를 100%로 준다.

또한 container의 height를 직접 명시해주어야 한다.

또한 가운데 정렬을 위해 svg의 margin을 auto, display를 block으로 주었다.

container에 padding값을 주게되면 svg는 가운데 정렬 됨을 알 수 있다.

overflow

svg의 크기를 넘치를 요소를 보이지 않게 하려면 css의 clip-path를 이용해야한다.

clip-path를 넘친 부분은 보이지 않는다.

svg
  .append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width - marginLeft - marginRight)
  .attr("height", height);

svg.select("target").attr("clip-path", "url(#clip)");