visx (Airbnb)

项目概述

visx（前身为 VX）是由 Airbnb 团队研发并开源的低阶可视化底层组件集，拥有超过 2 万 GitHub Stars。它打破了传统图表库的黑盒限制，将 D3 的高精度几何数学计算与 React 的 DOM 声明式更新完美融合。

核心特性

• ⚡️ 高度模块化按需拆分：拆分为 30 余个微型独立包（如 @visx/scale、@visx/shape、@visx/axis），按需引入打包极小。
• D3 计算 + React 渲染：由 D3 负责复杂的路径与坐标转换，完全交由 React 进行虚拟 DOM diff 与渲染。
• 零样式锁定与极致自由：不附带任何强制 CSS，可任意结合纯 SVG 渐变、Canvas 或 CSS 动画。
• Airbnb 全球生产环境淬炼：支撑 Airbnb 内部与外部海量数据分析系统，稳定性极高。

快速上手与示例代码

npm install @visx/shape @visx/scale @visx/group

import { Bar } from '@visx/shape';
import { Group } from '@visx/group';

export default function SimpleBarChart() {
  return (
    <svg width={320} height={160}>
      <Group top={20} left={20}>
        <Bar width={40} height={100} fill="#3b82f6" rx={4} />
      </Group>
    </svg>
  );
}

技术选型建议与适用场景

• 非常适合：需要自建企业自研图表库、打造独特非标可视化图表（如流向图、树图）的资深架构团队。
• 不适用场景：只想 3 分钟套用现成开箱即用图表模板的初级原型项目。