[D3] d3-chords (Chords) 사용법

chords 레이아웃은 관계형 다이어그램을 만드는 데 사용됩니다. 이 다이어그램은 원형이나 방사형 배열로 구성된 엔티티 간의 관계나 연결을 시각적으로 표현합니다. 각 코드의 두께나 크기는 일반적으로 해당 연결의 강도나 빈도를 나타냅니다.

d3.chord();

위 함수는 chord 레아웃의 진입점입니다. 이 함수는 다이어그램 내에서 코드와 그룹의 각도와 위치를 계산하기 위한 기본적인 구조를 정의하는 데 사용됩니다.

 

chord(matrix)

n x n 행렬에 대한 chord 레이아웃을 계산합니다. 이 행렬은 n개의 노드로 구성된 네트워크의 방향성 흐름을 나타냅니다.

위 함수의 반환값은 다음과 같은 속성을 가지는 객체입니다.

• source : 출발하는 서브그룹
• target : 도착하는 서브그룹

서브그룹은 또한 다음과 같은 속성을 가지는 객체입니다.

• startAngle : 시작 각도
• endAngle : 종료 각도
• value : matrix[i][j]의 흐름 값
• index : 노드 인덱스

ribbon에 전달하여 네트워크 관계를 표시합니다. 반환된 배열에 matrix[i][j] 또는 matrix[j][i]의 값이 0이 아닌 객체만 포함됩니다. i에서 j로 양방향 흐름을 나타내며, source는 항상 큰 값을 나타내도록 선택됩니다.

길이가 n인 보조 배열인 groups도 속성을 가집니다. 

• startAngle : 시작 각도
• endAngle : 종료 각도
• value : 노드 i에 대한 총 흐름 
• index : 노드 인덱스

const matrix = [
    [1,2],
    [3,4]
]

const chord = d3.chord()
const res = chord(matrix)
// res안에는 리턴된 배열 객체와 groups이 들어있습니다.

 

chord.padAngle(angle)

인접한 그룹 간의 간격을 지정하는 데 사용됩니다. angle이 지정된 경우, 라디안 단위로 그룹 간의 간격을 설정합니다. angle이 지정되지 않은 경우, 현재의 패딩 각도를 반환합니다. 기본값은 0입니다.

const chord = d3.chord()
chord.padAngle(1)
console.log(chord.padAngle()) // 1이 나옵니다.

 

chord.sortGroups(compare)

그룹을 정렬하기 위해서 사용됩니다. chord 레이아웃 내에서 원하는 순서대로 그룹을 배열할 수 있습니다.

const matrix = [
    [1,2],
    [3,4]
]

const chord = d3.chord().sortGroups(d3.ascending)(matrix)

 

chord.sortSubgroups(compare)

서브그룹을 정렬하기 위한 함수입니다.

const matrix = [
    [1,2],
    [3,4]
]

const chord = d3.chord().sortSubgroups(d3.descending)(matrix)

 

chord.sortChords(compare)

레이아웃을 비교하기 위한 함수입니다.

const matrix = [
    [1,2],
    [3,4]
]

const chord = d3.chord().sortChords(d3.ascending)(matrix)

 

chordDirected()

단방향 흐름을 알 수 있습니다.

const matrix = [
    [1,2],
    [3,4]
]

const chord = d3.chordDirected()(matrix)

 

chrodTranspose()

들어오는 흐름이 아닌 나가는 흐름을 강조하는데 유용합니다.

const matrix = [
    [1,2],
    [3,4]
]

const chord = d3.chordTranspose()(matrix)