위어드섹터 공식 블로그

진행 중인 데이터너겟 프로젝트에서 d3를 활용한 곡선 그래프를 구현해야 했습니다. canvas 안에서는 html 코드를 삽입할 수 없어서 d3의 rect 를 이용하여 구현해보려고 시도해보았습니다. 하지만 두 가지 난관에 부딪혔습니다. 첫번째는 디자인과 똑같이 한쪽의 border-radius를 만드는 과정이었습니다. 그 이유가 양쪽의 border-radius는 속성 값으로 쉽게 변경할 수 있는데, 한쪽만 주는 경우는 svg의 path로 직접 좌표로 그려주어야 했기 때문입니다. 그 예시가 다음과 같습니다. function rightRoundedRect(x, y, width, height, radius) { return "M" + x + "," + y + "h" + (width - radius) + "a" +..