d3 shape - line 차트 데이터 없을 때 라인 그래프 안보임 해결

상황 

문제의 차트

 

d3 차트 라이브러리로 line 차트를 그리는데, 차트에 그려지는 value 값이 0일때는 라인 차트가 아예 나타나지 않고, 다른 값이 있을때는 차트가 그려지다가 0이 나오면 차트가 끊기는 이상한 현상이 있었다. 

 

Error: <path> attribute d: Expected number, "M36.5,NaNL79.5,NaNL122…".

 

게다가 콘솔에는 이런 에러가 찍히고 있었다.

 

 

기존

 

import { line } from 'd3-shape';

const LineChart = ({bars, xScale, yScale}) => {
  const lineGenerator = line()
    .x((bar) => xScale(bar.data.indexValue) + bar.width / 2)
    .y((bar) => yScale(bar.data.data.value));

  return (
    <path
      d={lineGenerator(bars)}
      fill="transparent"
      stroke={'rgba(200, 30, 15, 1)'}
      style={{pointerEvents: 'none'}}
    />
  );
};

export default LineChart;

 

 

라인차트를 그리기 위해서 받는 데이터 리스트 bars 는 하기와 같은 데이터 구조를 가지고 있다. 

이 데이터를 기반으로 d3는 line() 메서드를 통해 string 형식의 좌표를 가지고있는 path 엘리먼트를 그린다.  

 

 

 

콘솔로 찍어보면 bars 는 위와 같은 모양임을 확인할 수 있다.

기존 코드는 y축을 그릴때 data 값을 yScale 이라는 메서드안에 y 축 해당 가지고 오고 싶은 데이터를 data.data.value로 가져왔다. 

 

 

 

 

그런데 그 data 정보를 자세히 펼쳐보는데서 문제가 해결 되었다.

data.data.value 로 값을 가져왔는데, 그 정보는 value가 0 값일때는 아예 data.data: {} 객체 안에 value 프로퍼티가 존재 하지 않는데서 문제가 난 것이었다. 

따라서 value가 0일때 정확히 숫자형으로 해당 값을 나타내주는 프로퍼티를 가져와서 사용한다. 

다행히 data.value에 그 해당값이 들어가있는 것을 확인할 수 있었다. 따라서 그 부분의 코드를 변경해주었다. 

 

 

변경

 

import { line } from 'd3-shape';

const LineChart = ({bars, xScale, yScale}) => {
  const lineGenerator = line()
    .x((bar) => xScale(bar.data.indexValue) + bar.width / 2)
    .y((bar) => yScale(bar.data.value));  //<---------- 수정

  return (
    <path
      d={lineGenerator(bars)}
      fill="transparent"
      stroke={'rgba(200, 30, 15, 1)'}
      style={{pointerEvents: 'none'}}
    />
  );
};

export default LineChart;

 

data.value 값으로 코드를 변경해준다. 

 

 

 

그러면 0일때도 라인그래프가 잘 나타나는 것을 확인할 수 있다!!