VennDiagram
visualCompare two or three sets with area-scaled SVG circles, interactive exclusive regions, and an accessible table; three-set placement is approximate.
100%
두 집합 — 겹침 면적이 정확히 맞는다
| Region | Size |
|---|---|
| 구매자 only | 900명 |
| 뉴스레터 구독자 only | 500명 |
| 구매자 ∩ 뉴스레터 구독자 | 300명 |
세 집합 — 영역 클릭
플랫폼별 활성 사용자
| Region | Size |
|---|---|
| 웹 only | 2,240명 |
| iOS only | 1,360명 |
| Android only | 1,100명 |
| 웹 ∩ iOS | 480명 |
| 웹 ∩ Android | 340명 |
| iOS ∩ Android | 120명 |
| 웹 ∩ iOS ∩ Android | 140명 |
선택한 영역: 없음
겹침 없음 / 완전 포함
| Region | Size |
|---|---|
| 무료 플랜 only | 900명 |
| 엔터프라이즈 only | 300명 |
| 무료 플랜 ∩ 엔터프라이즈 | 0명 |
| Region | Size |
|---|---|
| 전체 사용자 only | 1,500명 |
| 이번 주 활성 only | 0명 |
| 전체 사용자 ∩ 이번 주 활성 | 500명 |
테스트 커버리지
2026년 7월 9일생성된 테스트 결과를 찾지 못했습니다.
VennDiagram 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.
테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.
VennDiagram Props
| Prop | 타입 | 기본값 | 설명 |
|---|---|---|---|
sets* | VennSet[] | — | 집합 2~3개. { id, label, size, color? } |
intersections* | VennIntersection[] | — | 쌍별 겹침과 (3집합이면) 삼중 겹침. { sets, size } |
height | number | 280 | 차트 높이. 너비는 1.5배 viewBox |
valueFormatter | (n: number) => string | — | 값 포맷터. 기본은 로캘 숫자(formatNumber) |
locale | string | — | 기본 숫자 포맷 로캘 |
showLabels | boolean | true | 집합 이름과 영역 값 표시. 가장 큰 영역의 4% 미만인 조각은 값 라벨을 생략한다(표에는 남는다) |
onRegionClick | (region: { sets: string[]; size: number }) => void | — | 배타 영역 클릭 핸들러. 주면 영역이 버튼이 됩니다. 영역은 핸들러가 없어도 포커스 가능하고 툴팁을 가진다 |
loading | boolean | false | 새 데이터를 기다리는 동안 그림을 흐리게 유지 |
labels | VennDiagramLabels | — | i18n용 라벨 오버라이드 (요약 문장, 영역 이름, 빈 상태, 표) |
className | string | — | 루트 CSS 클래스 |
aria-label | string | — | 접근성 이름. 뒤에 계산된 요약 문장이 붙습니다 |
Design contract
Usage
- 집합 2~3개의 겹침을 보여 줄 때 씁니다. 집합 크기와 쌍별 겹침(3집합이면 삼중 겹침까지)을 같은 단위로 넘기세요.
- valueFormatter로 단위(명, 건)를 붙이면 영역 값과 aria 요약 문장에 함께 반영됩니다.
- 영역 클릭으로 드릴다운하려면 onRegionClick을 주세요. 그러면 각 배타 영역이 버튼이 됩니다.
- Avoid: 집합 4개 이상은 원으로 정확히 그릴 수 없어 무시됩니다. 그 경우 매트릭스나 UpSet 형태를 쓰세요.
- Avoid: 3집합 레이아웃은 근사입니다. 정확한 수치가 중요하면 값 라벨과 표를 함께 보여 주세요.
Import
tsx
import {
VennDiagram,
computeVennLayout,
exclusiveRegionSizes,
lensArea,
solveCircleDistance,
vennRegionKey,
} from "@reopt-ai/opt-ui";