D3.js Layout Debugging

핵심 레슨: D3 selection chain에서 .call(null)은 에러 발생

D3 selection의 .call() 메서드에 null을 전달하면 TypeError가 발생하고, 이후의 전체 chain이 실패합니다.

// ❌ BAD — null이면 chain 끊김
nodeGroups.call(layout === 'force' ? d3.drag() : null)
// ✅ GOOD — 조건부로 call
if (layout === 'force') {
  nodeGroups.call(d3.drag())
}

forceLink mutation 문제

d3.forceLink()가 links 배열의 source/target을 in-place로 id에서 node 객체로 변경합니다. 레이아웃 전환 시 원본 데이터가 망가집니다.

// ❌ BAD — 원본 links를 직접 전달
const linkForce = d3.forceLink(originalLinks).id(d => d.id)
// ✅ GOOD — 복사본 사용
const linkCopy = JSON.parse(JSON.stringify(links))
const linkForce = d3.forceLink(linkCopy).id(d => d.id)

SVG 전체 지우기 시 주의사항

svg.selectAll('*').remove()는 , zoom behavior, 필터 등을 모두 지웁니다. 렌더링 함수에서 매번 재생성해야 합니다.

GitHub API Rate Limit

• 비인증: 시간당 60회
• PAT 토큰: 시간당 5,000회
• Rate limit 리셋은 엄격히 1시간 후
• gh api rate_limit으로 확인 가능
• Vercel 서버 IP와 로컬 gh CLI는 별도 할당량