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

리본은 코드 다이어그램에서 두 노드 간의 흐름의 양을 시각적으로 나타냅니다.

두 가지 종류의 리본이 있습니다: 리본은 양방향 흐름을, 리본화살표는 단방향 흐름을 나타냅니다. 리본화살표는 chordDirected 적합합니다.

 

ribbon()

기본 설정으로 새 리본 생성을 합니다.

const ribbon = d3.ribbon()

 

ribbon(...arguments)

주어진 인수를 기반으로 새 리본을 생성합니다. 값들은 리본 생성기의 접근자 함수로 전달됩니다.

리본에 컨텍스트가 있는경우 해당 경로로 메서드를 호출하여 리본을 렌더링하고 void를 반환합니다. 컨텍스트가 없는 경우, 경로 데이터 문자열이 반환됩니다.

const ribbon = d3.ribbon()
ribbon({
    source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
    target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
})

// context가 null이라서 M164.0162810494058같은 문자열 반환

 

ribbon.source(source)

source를 설정하고 리본을 반환합니다.

const ribbon = d3.ribbon()
const source = ribbon.source({
    source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240}
})
console.log(source.source()) // source 접근자 반환

 

ribbon.target(target)

target을 설정하고 리본을 반환합니다.

const ribbon = d3.ribbon()
const target = ribbon.target({
    target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
})
console.log(target.target()) // target 접근자 반환

 

ribbon.radius(radius)

source와 target의 반지름을 설정후 리본을 반환합니다. 반지름을 설정했기 때문에 source와 target에 반지름을 지정할 필요는 없습니다.

const ribbon = d3.ribbon().radius(240);
ribbon({
    source: {startAngle: 0.7524114, endAngle: 1.1212972},
    target: {startAngle: 1.8617078, endAngle: 1.9842927}
})

 

ribbon.sourceRadius(radius)

source의 반지름을 설정한 후 리본을 반환합니다.

const ribbon = d3.ribbon().sourceRadius(240)
ribbon({
    source: {startAngle: 0.7524114, endAngle: 1.1212972},
    target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
})

 

ribbon.targetRadius(radius)

target의 반지름을 설정한 후 리본을 반환합니다.

const ribbon = d3.ribbon().targetRadius(240)
ribbon({
    source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
    target: {startAngle: 1.8617078, endAngle: 1.9842927}
})

보통 target의 반지름은 source의 반지름에서 설정됩니다. 이렇게 하면 source와 target의 연결을 시각적으로 구별되기 때문입니다.

 

ribbon.startAngle(angle)

시작 각도를 설정 후 리본을 반환합니다.

const ribbon = d3.ribbon().startAngle(1.8617078)
ribbon({
    source: {endAngle: 1.1212972, radius: 240},
    target: {endAngle: 1.9842927, radius: 240}
})

 

ribbon.endAngle(angle)

종료 각도를 설정 후 리본을 반환합니다.

const ribbon = d3.ribbon().endAngle(1.8617078)
ribbon({
    source: {startAngle: 1.1212972, radius: 240},
    target: {startAngle: 1.9842927, radius: 240}
})

 

ribbon.padAngle(angle)

인접한 리본 사이의 각도 간격을 조절합니다.

const ribbon = d3.ribbon().padAngle(2)
ribbon({
    source: {startAngle: 0.7524114, endAngle: 1.1212972, radius: 240},
    target: {startAngle: 1.8617078, endAngle: 1.9842927, radius: 240}
})

 

ribbon.context(context)

context가 주어지면 렌더링할 컨텍스트를 설정합니다. context가 없으면 현재의 context를 반환합니다.

 

ribbon.ribbonArrow()

단방향 흐름을 나타내는 ribbon을 생성합니다.

const ribbonArrow = d3.ribbonArrow()

 

ribbonArrow.headRadius(radius)

반경을 지정 후 리본을 생성합니다.

const ribbonArrow = d3.ribbonArrow();
const head = ribbonArrow.headRadius(50)