如何在visx中创建矩形元素实现附图所示可视化图表

你要实现的这类分块矩形可视化，不用找visx的专属封装图表组件，visx是原子化组件库，所有矩形类元素都基于最基础的形状组件搭建，具体实现步骤如下：

• 先完成基础依赖准备
  引入@visx/responsive获取父容器的实际宽高，避免写死画布尺寸；从@visx/scale引入比例尺方法，根据你要展示的行列数/数值维度创建x、y两个线性比例尺，提前定义好矩形之间的留白间距。
• 核心矩形元素的构建方法
  矩形元素直接用@visx/shape导出的Bar组件即可——这个组件本质就是对SVG原生<rect>标签的封装，也是所有柱状图、条形图、块类图表的基础单元，没有单独的“特殊矩形组件”。你只需要给每个矩形传入4个必填定位属性：
  • x：矩形左上角的横向像素坐标，通过提前定义的x比例尺换算，记得累加留白间距的偏移值
  • y：矩形左上角的纵向像素坐标，通过y比例尺换算
  • width：单块矩形的渲染宽度，等尺寸分块的话直接用「(画布总宽度-总留白宽度)/列数」计算即可
  • height：单块矩形的渲染高度，等尺寸分块的话用「(画布总高度-总留白高度)/行数」计算
    如果你要做按数值映射尺寸的矩形树图，就引入@visx/hierarchy的treemap生成器处理层级数据，它会直接输出每个矩形块的x、y、width、height属性，直接透传给Bar组件就能用，不需要手动计算坐标。
• 补充样式与交互
  矩形的填充色、描边直接通过fill、stroke属性传入对应色值即可，hover高亮、点击选中这类交互直接在Bar组件上绑定原生DOM事件就能实现；需要在块内加文字标签的话，搭配@visx/text的Text组件，基于每个矩形的中心坐标定位即可。

注意：visx官方文档里Bar组件的说明归在@visx/shape的形状类组件下，没有放在独立的“图表组件”分类里，之前没找到构建方法大概率是找错了文档分类。

内容的提问来源于stack exchange，提问作者Karen