Nivo Line Chart 라이브러리 사용 중 Error: <path> attribute d: Expected moveto path command ('M' or 'm'), "null" 에러가 발생했다.

Sundae·2023년 11월 19일

프로젝트 내에 통계 기능을 추가할 때 Nivo의 그래프 라이브러리를 사용했다. 그런데 다음과 같은 에러를 만났다. Error: attribute d: Expected moveto path command ('M' or 'm'), "null"에러가 발생하였다. Nivo 라이브러리에서 발생한 오류이다.

뭔가 그래프를 그릴 때 사용하는 데이터의 구조가 잘못된 것 같아서 Nivo에서 제공하는 샘플데이터의 데이터 구조와 비교해보았다.

  • Nivo의 샘플데이터
  • 제작하여 넘겨준 데이터

    자세히 보니 데이터 구조에는 큰 차이가 없다. 그렇다면 데이터의 자료형 때문에 문제가 발생하는 것이 아닐까?
    Nivo에서 제공하는 샘플코드로 테스트해보았다.

샘플데이터로 출력된 화면은 위와 같다. 첫번째로 시도할 테스트는 "x"라는 키를 다른 데이터로 변경한다. 두번째로 시도할 테스트는 "x"키에 해당하는 데이터의 자료형을 정수로 바꿔볼 것이다.

"x"를 "기구"로 바꾸자 아래와 같이 정확히 "기구"로 변경한 데이터만 출력되지 않았다. 또한 "x"에 해당하는 데이터의 자료형을 숫자로 바꾸자 똑같이 출력되지 않는 결과를 발견하였다.

에러가 난 원인을 모두 고쳐 데이터에 적용하고 넘겨주자 아래와 같이 '회원권'과, '시설'에 대한 통계가 정상적으로 출력되었다.

profile
성장 기록 / 글에 오류가 있다면 댓글 부탁드립니다.

0개의 댓글