用途:在 React 项目中使用 visx(Airbnb 的 React + D3 库)构建数据可视化。适合基础图表库无法满足的自定义图表、交互式数据探索,以及有特定设计要求的仪表盘;当需要 D3 的能力同时保持 React 模式时使用。资料中将其与 Recharts(快速标准图表)、Chart.js(简单、基于 canvas)、直接使用 D3(最大控制、非 React)对比,定位为「D3 原语转 React 组件,完全可控且对 React 友好」。
主要能力:提供分组、比例尺、形状、坐标轴、网格等核心模块,以及 tooltip、响应式容器、渐变、曲线等常用扩展。基本模式包括折线图(LinePath、scaleTime/scaleLinear、AxisBottom/AxisLeft、Group)、柱状图(Bar、scaleBand/scaleLinear)、响应式容器(ParentSize)和 tooltip(useTooltip、TooltipWithBounds、localPoint)。渲染为 SVG,可用 className 或内联样式配合 Tailwind 等方案。
使用方式:按需安装模块,例如核心用 pnpm add @visx/group @visx/scale @visx/shape @visx/axis @visx/grid,常用扩展用 pnpm add @visx/tooltip @visx/responsive @visx/gradient @visx/curve,全量安装用 pnpm add @visx/visx(包体积更大)。
限制:资料标注状态为 Starter,模式将随使用演进;待办包括首个真实图表以确立模式、面积图模式、饼图/环形图模式、动画模式,以及与 tRPC 数据获取的集成。收费、价格、平台支持等信息暂未提供。