Sankey
노드 간 흐름(flow)을 시각화하는 독립 차트.
개요
Sankey는 recharts의 Sankey를 얇게 래핑한 독립 차트입니다. 노드와 링크의 fill/stroke $토큰을 해석하며, node/link slot도 오브젝트 형태일 때 토큰을 처리합니다.
- 노드 단위 토큰 —
data.nodes[i].fill에 $토큰 사용 가능 - 링크 단위 토큰 —
data.links[i].fill,stroke$토큰 지원 - slot 지원 —
node,linkprop으로 모든 노드/링크 공통 스타일 지정
언제 사용하나요
- 유입 경로 분석 — 채널 → 랜딩 → 전환 흐름
- 에너지/자원 흐름 — 수입/지출 구조
- 프로세스 흐름 — 단계 간 이동 수량
Usage
기본 사용법
data.nodes 배열에 노드를, data.links에 source/target/value를 지정합니다.
() => { const data = { nodes: [ { name: 'SNS' }, { name: '검색' }, { name: '광고' }, { name: '랜딩페이지' }, { name: '앱' }, { name: '가입' }, { name: '구매' }, ], links: [ { source: 0, target: 3, value: 350 }, { source: 0, target: 4, value: 200 }, { source: 1, target: 3, value: 280 }, { source: 1, target: 4, value: 150 }, { source: 2, target: 3, value: 180 }, { source: 2, target: 4, value: 120 }, { source: 3, target: 5, value: 480 }, { source: 3, target: 6, value: 330 }, { source: 4, target: 5, value: 270 }, { source: 4, target: 6, value: 200 }, ], }; return ( <ResponsiveContainer width="100%" height={400}> <Sankey data={data}> <ChartTooltip /> </Sankey> </ResponsiveContainer> ); }
노드별 색상
각 노드에 fill $토큰을 지정합니다.
() => { const data = { nodes: [ { name: 'SNS', fill: '$primary-50' }, { name: '검색', fill: '$primary-40' }, { name: '광고', fill: '$primary-30' }, { name: '랜딩페이지', fill: '$teal-50' }, { name: '앱', fill: '$lightBlue-40' }, { name: '가입', fill: '$gray-50' }, { name: '구매', fill: '$indigo-80' }, ], links: [ { source: 0, target: 3, value: 350 }, { source: 1, target: 3, value: 280 }, { source: 2, target: 3, value: 180 }, { source: 3, target: 5, value: 480 }, { source: 3, target: 6, value: 330 }, ], }; return ( <ResponsiveContainer width="100%" height={400}> <Sankey data={data} node={{ stroke: '$background-1', strokeWidth: 2 }}> <ChartTooltip /> </Sankey> </ResponsiveContainer> ); }
Props
recharts Sankey를 래핑합니다. 여기에 명시되지 않은 props는 recharts Sankey API를 참고하세요.
Sankey
extends recharts Sankey
Prop
Type