[D3] d3-path(Canvas 2D를 SVG 직렬화) 사용법

canvas를 이용해서 원을 그리는 함수가 있습니다.

function drawCircle(context, radius) {
    context.moveTo(2 * radius, radius)
    context.arc(radius, radius, radius, 0, 2 * Math.PI)
}

d3-path 모듈을 사용하면 이 함수를 가져와 svg로 렌더링할 수 있습니다.

drawCircle(d3.path(), 10).toString()
// M20,10A10,10,0,1,1,0,10A10,10,0,1,1,20,10

위에 값을 svg 안에 d로 넣으면 canvas와 같이 원이 그려집니다.

d3.path()

CanvasPathMethods를 구현하는 새로운 path 직렬 변환기를 구성합니다.

path.moveTo(x,y)

지정된 x,y 좌표로 이동합니다. 아무 작업도 수행하지는 않지만 그 다음 명령을 시작할 위치를 정의합니다.

path.closePath()

현재 하위 경로를 종료하고 현재 지점에서 현재 하위 경로의 초기 지점까지 자동 직선이 그려지도록합니다.

밑에 HTML에서 2번째가 closePath를 이용하여 하위 경로를 종료 후 초기 지점에서 출발하도록 합니다.

path.lineto(x,y)

현재 지점에서 지정된 지점(x,y)까지 직선을 그립니다.

path.quadraticCurveTo(cpx,cpy,x,y)

2차 베지어 곡선을 만드는데 사용됩니다. cpx, cpy는 제어점의 x, y 좌표입니다. x,y는 끝점의 x,y 좌표입니다.

path.bezierCurveTo(cpx1,cpy1,cpx2,cpy2,x,y)

제어점 2개를 이용하여 3차 베지어 곡선을 만드는데 사용됩니다.

path.arcTo(x1,y1,x2,y2,radius)

현재 경로에서부터 지정된 두 점을 연경하는 원호를 그립니다.

path.arc(x,y,radius,startAngle,endAngle,anticlockwise)

지정된 중심 x,y으로 반경 radius만큼 startangle과 endAngle를 사용하여 원호를 그립니다. anticlockwise가 true이면 호는 시계 반대 방향으로 그려집니다. 그렇지 않으면 시계 방향으로 그려집니다. 현재 점이 시작점과 같지 않으면 현재 점에서 호의 시작점까지 직선으로 그려집니다.

path.rect(x,y,w,h)

4개의 점(x,y), (x+w,y), (x+w,y+h), (x,y+h)를 포함하는 새 하위 경로를 생성합니다. 4개의 점은 직선으로 연결됩니다.

path.toString()

path의 문자열 표현을 반환합니다.

d3.pathRound(digits)

소수점 이하 자릿수를 지정된 자릿수로 제한합니다.