d3.js xAxis scaleTime() 사용시 날짜 포맷 처리

---

d3.js로 라인 및 막대그래프를 사용할 때  x의 값이 날짜인 경우 scaleTime()을 사용한다.

 

예를 들어
데이터가 '2023-01-01' , '20230101' 등 날짜 표현은 다양하게 생성된다. 
개발 시 하이픈을 제거한 '20230101'의 포맷을 많이 사용하는데,
이 경우 scaleTime()을 사용할 때 d3.timeParse()을 사용하여 포맷을 설정해줘야 한다. 

다음 예시와 같이 사용하면 된다. 

const parseTime = d3.timeParse('%Y%m%d');

const x = d3.scaleTime()
            .range([0, width])
            .domain( d3.extent(data, function (d) {
                  return parseTime(d.saleDate);			// 예시
             }));
             
                        
const line1 = d3.line()
            .curve(d3.curveCatmullRom.alpha(0.5))
            .x(function (d) {
                return x(parseTime(d.saleDate));        // 예시
            })
            .y((d) => y(d.avg));

추가적으로 

x, y 축에 데이터 값을 표시할 경우

 

svg .append("g")
      .attr("transform", `translate(0,${height})`)
      .call(d3.axisBottom(x).tickFormat(d3.timeFormat('%m/%d')))   

위와 같이 코딩하였을 경우  월/일 로 표시된다. 
만일 날짜값이 두개로 찍힐 경우

 .call(d3.axisBottom(x).tick(날짜 데이터 갯수).tickFormat(d3.timeFormat('%m/%d'))) 
위와 같이 수정하면 해결할 수 있다.

 

이번에도 개발 방법의 한가지를 공유했을 뿐 다른 방법도 존재한다.

 

따라서 코딩 방법의 선택은 개발자의 몫이다.

 

---