使用 visx/hierarchy 在 React 中可视化树形与层次数据五大布局组件实战指南【免费下载链接】visx visx | visualization components项目地址: https://gitcode.com/gh_mirrors/vi/visx导读visx/hierarchy是 visx 体系中专门面向**层次数据hierarchical data**的可视化子包为 React 提供了一组开箱即用的布局组件整体设计与d3-hierarchy保持一一对应。本指南将以 packages/visx-hierarchy/Readme.md 为核心骨架结合仓库源码深入讲解如何用hierarchy()构造 d3 格式的根节点、五种布局Tree / Cluster / Pack / Partition / Treemap各自的适用场景与完整 props以及如何通过渲染回调render prop和自定义节点/连线组件实现完全可控的层次可视化。读完本文你可以直接在自己的 React 项目中搭建树图、圈图、旭日图和矩形树图。为什么需要层次数据组件许多真实数据集天然具有层级结构文件系统目录、公司组织架构、商品类目树、基因谱系、词云词频嵌套……在 React 生态中处理这类数据通常面临两个问题布局算法复杂树、集群、打包、分区、矩形树都有各自的几何布局规则手写成本高与渲染解耦困难布局结果需要转成 SVG 元素并且要支持样式定制。visx/hierarchy的解决方案是用d3-hierarchy完成布局计算用 React 组件负责渲染。所有组件接收同一个d3-hierarchy定义的根节点root node作为输入因此你在不同布局之间切换时数据层完全无需改动。从 src/index.ts 可以看到包对外同时导出五类能力五种布局组件Tree、Cluster、Pack、Partition、Treemap三个默认渲染组件HierarchyDefaultLink、HierarchyDefaultNode、HierarchyDefaultRectNoded3-hierarchy 的布局与工具函数再导出hierarchy、stratify、以及treemapSquarify、treemapBinary、treemapResquarify、treemapDice、treemapSlice、treemapSliceDice六种 treemap 平铺算法完整的类型再导出见 src/types.tsHierarchyNode、HierarchyPointNode、HierarchyCircularNode、HierarchyRectangularNode、HierarchyPointLink、HierarchyCircularLink、HierarchyRectangularLink、HierarchyLink以及自定义平铺方法类型TileMethodDatum。// equivalent to import { hierarchy } from d3-hierarchy; import { hierarchy } from visx/hierarchy;安装与依赖npm install --save visx/hierarchy根据 package.jsonvisx/hierarchy的运行时依赖非常克制d3-hierarchy^1.1.4布局计算引擎visx/group提供Group容器用于整体位移top/left偏移classnames合并 classNametypes/d3-hierarchyTypeScript 类型支持。其 peerDependencies 为react^18 || ^19并声明了 ESM/CJS 双入口exports字段分别指向esm/index.js与lib/index.js支持 tree-shaking。第一步构造层级根节点所有布局组件都接收一个root: HierarchyNodeDatum属性——这与d3-hierarchy模块定义的根节点格式完全一致。因此第一步是把普通 JS 对象转换成 d3 层级结构import { hierarchy } from visx/hierarchy; const root hierarchy({ name: root, children: [ { name: child #1 }, { name: child #2, children: [{ name: grandchild #1 }, { name: grandchild #2 }, { name: grandchild #3 }], }, ], });转换后的root是HierarchyNodeDatum实例携带depth、height、parent、children、descendants()、links()等方法可以直接传给任意布局组件。hierarchy默认从每个节点的children属性读取子节点并可以通过第二个参数自定义 accessorconst root hierarchy(data, (d) d.subItems);此外包还再导出了stratify适合把扁平记录如{ id, parentId }列表组装成层级结构例如数据库中的目录表或 CSV 导入的组织数据。五种布局组件适用场景与完整 Props五种布局组件在 API 设计上高度一致都接收root、top、left、className都支持children渲染回调覆盖默认输出也都允许通过nodeComponent/linkComponent注入自定义渲染组件。下面逐一展开。Tree经典树状图Tree对应d3-hierarchy的tree()布局将树节点按“兄弟在同一水平层、叶子平铺”的方式排列是最常用的目录树 / 组织架构图布局。核心 propssrc/hierarchies/Tree.tsxProp类型说明rootHierarchyNodeDatum必填d3 层级根节点size[number, number]布局尺寸[width, height]。坐标系统是任意的例如径向布局可传[360, radius]表示 360° 广度、radius 深度nodeSize[number, number]每个节点的固定尺寸[width, height]设置后根节点固定在⟨0, 0⟩separation(a, b) number相邻节点分离度 accessor控制兄弟/表亲节点间距linkComponent/nodeComponentReact 组件自定义连线/节点渲染children(node) ReactNode渲染回调接收布局结果HierarchyPointNodeDatumtop/leftnumber整体位移作用于外层GroupclassNamestring追加到外层Group的 class默认带visx-tree最简单的用法是让组件用默认节点与连线完成渲染import { Tree, hierarchy } from visx/hierarchy; const data hierarchy({ name: root, children: [{ name: a }, { name: b }] }); export default function SimpleTree() { return ( svg width{500} height{300} Tree top{20} left{20} size{[460, 260]} root{data} / /svg ); }Cluster集群图叶节点等距Cluster对应d3-hierarchy的cluster()布局。它与Tree的区别在于所有叶节点被等距排布在底层父节点居于子节点正中非常适合表现具有明显层级且叶子数量可观的“谱系/聚类”结构。其 props 与Tree几乎一致src/hierarchies/Cluster.tsxsize、nodeSize、separation、linkComponent、nodeComponent、children、top、left、className。源码中有一处细节值得注意Tree用if (nodeSize)判断是否设置nodeSize而Cluster使用if (nodeSize ! undefined)允许显式传入[0, 0]这类假值场景细节处理上更严谨。Pack圆形打包图气泡图Pack对应d3-hierarchy的pack()布局用大小不一的圆表示节点通过圆面积体现数值大小适合展示“部分与整体”的占比关系。核心 propssrc/hierarchies/Pack.tsxProp类型说明radius(node) number叶子圆半径 accessor若不传半径由叶子节点的value推导并按布局size等比缩放size[number, number]布局尺寸[width, height]paddingnumber节点间的近似间距nodeComponentReact 组件自定义节点渲染节点为HierarchyCircularNode含x、y、r注意Pack的输出节点是HierarchyCircularNode类型默认节点组件HierarchyDefaultNode恰好兼容它读取node.x、node.y、node.r渲染一个circle见 HierarchyDefaultNode.tsx默认半径 15、填充色#21D4FD。因此Pack与Tree/Cluster可共用同一个默认节点组件。Partition分区图旭日图 / 冰柱图Partition对应d3-hierarchy的partition()布局把节点空间按 value 递归切分为矩形切片横向或纵向堆叠是**旭日图Sunburst和冰柱图Icicle**的底层布局。核心 propssrc/hierarchies/Partition.tsxProp类型说明size[number, number]布局尺寸roundboolean是否对坐标取整避免亚像素渲染模糊paddingnumber相邻子节点之间的间隔nodeComponentReact 组件自定义节点渲染节点为HierarchyRectangularNode含x0/x1/y0/y1Partition默认使用HierarchyDefaultRectNodeHierarchyDefaultRectNode.tsx它从节点的x0、x1、y0、y1计算width、height并渲染rect。若需要旭日图效果只需把size设为极坐标语义的[2 * Math.PI, radius]再把矩形节点替换为弧形渲染即可。Treemap矩形树图Treemap对应d3-hierarchy的treemap()布局将矩形区域按 value 递归切块是磁盘占用分析、商品销售结构等场景的标准选择也是本包中props 最丰富的组件src/hierarchies/Treemap.tsxProp类型说明tileTileMethodDatum平铺算法包内置再导出treemapSquarify默认、treemapBinary、treemapResquarify、treemapDice、treemapSlice、treemapSliceDice六种size[number, number]布局尺寸roundboolean是否取整坐标paddingnumber \| accessor同时设置内、外 paddingpaddingInnernumber \| accessor相邻子节点间距paddingOuternumber \| accessor节点与其子节点的间距paddingTop/paddingRight/paddingBottom/paddingLeftnumber \| accessor四个方向单独控制的边距nodeComponentReact 组件自定义节点渲染HierarchyRectangularNode实现上Treemap.tsx#L73-L83padding系列参数统一经由 utils/setNumOrNumAccessor.ts 处理无论你传一个数字还是返回数字的 accessor 函数都会正确绑定到 d3 treemap 布局上。这意味着你完全可以按节点属性如node.depth或node.value动态决定边距import { Treemap, hierarchy, treemapSquarify } from visx/hierarchy; const root hierarchy(data).sum((d) d.value); Treemap root{root} tile{treemapSquarify} size{[500, 300]} round paddingInner{2} paddingOuter{4} nodeComponent{({ node }) ( rect x{node.x0} y{node.y0} width{node.x1 - node.x0} height{node.y1 - node.y0} fill{node.depth 0 ? #21D4FD : #b6fbff} stroke#fff / )} /;注意这里调用了root.sum((d) d.value)——sum()是 treemap、pack、partition 布局计算数值的前置步骤它把每个节点的value汇总到祖先节点布局算法正是依据这些 value 分配面积。这也是HierarchyNode与普通对象最大的差异点之一。渲染回调children与自定义组件五种布局组件都支持两条渲染路径源码结构完全一致const data layout(root); if (children) return {children(data)}/; // 渲染回调优先 return ( Group top{top} left{left} className{cx(visx-tree, className)} {/* 默认遍历 links() 与 descendants() 渲染 */} /Group );以 Tree.tsx#L68-L87 为例。渲染回调模式传入children后组件只负责计算布局把HierarchyPointNode或HierarchyCircularNode/HierarchyRectangularNode交给你自由渲染。这是构建交互式、动画化、异形节点图表的首选方式典型用法如径向树图Tree root{root} size{[2 * Math.PI, 400]} {(tree) ( Group {tree.links().map((link, i) ( path key{i} d{M${link.source.x},${link.source.y} A... } // 用弧线连接父子 fillnone stroke#999 / ))} {tree.descendants().map((node, i) ( circle key{i} cx{node.x} cy{node.y} r{node.depth 0 ? 8 : 4} fill#21D4FD / ))} /Group )} /Tree默认渲染模式不传children时组件遍历data.links()与data.descendants()用linkComponent与nodeComponent逐个渲染。三个默认组件可直接复用或作为自定义组件的起点HierarchyDefaultLinkHierarchyDefaultLink.tsx渲染一条linestrokeWidth2、stroke#999、strokeOpacity0.6HierarchyDefaultNode渲染circler15、fill#21D4FD兼容x/y/r与x/y两种节点结构HierarchyDefaultRectNode渲染rect由x0/x1/y0/y1计算宽高。所有默认渲染都包在visx/group的Group中且每种布局有独立的 className 前缀visx-tree、visx-cluster、visx-pack、visx-partition、visx-treemap便于全局样式覆盖。小结从数据到图表的四步路径综合以上内容用visx/hierarchy做层次可视化的固定套路可以归纳为四步构造层级用hierarchy(data)或stratify(rows)把原始数据变成HierarchyNode汇总数值仅面积类布局需要调用.sum((d) d.value)让祖先节点累加 value选择布局树状结构用Tree/Cluster面积占比用Pack/Partition/Treemap并通过size、padding、tile等 props 调参定制渲染要么用默认节点/连线组件快速出图要么用children渲染回调完全掌控输出配合自定义组件实现径向树、旭日图等高级形态。仓库配套的测试如 test/Tree.test.tsx、test/Cluster.test.tsx、test/Defaults.test.tsx覆盖了布局坐标、默认组件渲染与节点/连线计数等行为可作为你自定义实现时的行为参考。此外visx-demo包的 sandboxes 目录中有各布局的完整可运行示例packages/visx-demo/src/sandboxes 下的 tree、treemap、pack、partition 等示例可直接对照学习。由于布局完全依赖d3-hierarchy的确定性算法同一份root在不同布局间切换时数据层零改动——这也是本包“以文档规定的 d3 根节点为唯一数据契约”设计理念的最大红利。【免费下载链接】visx visx | visualization components项目地址: https://gitcode.com/gh_mirrors/vi/visx创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考