# @carrotsearch/foamtree 中文文档

规范地址：https://npmcn.com/package/%40carrotsearch/foamtree/

版本：3\.7\.0
npm 元数据更新时间：2026-11-04T17:26:26.290Z
中文译文更新时间：2026-11-09T05:50:10.720Z
软件包许可：SEE LICENSE IN LICENSE\.txt

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40carrotsearch/foamtree
原文对照：https://npmcn.com/package/%40carrotsearch/foamtree/?lang=original
项目主页：https://carrotsearch.com/foamtree/

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：333 kB，7 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- 首次发布：2021-01-06T18:22:16.207Z
- 最新版本发布：2026-11-04T17:26:26.026Z
- 近 30 天下载量：5836（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：20（近 12 个月 7 个）

## 中文简介

伏罗诺伊树图可视化. 创新布局,动画互动,无限定制.

## 安装

```sh
npm install @carrotsearch/foamtree
```

也可以使用：`pnpm add @carrotsearch/foamtree`、`yarn add @carrotsearch/foamtree`、`bun add @carrotsearch/foamtree`

## README

# [泡沫](https://carrotsearch.com/foamtree/)

FoamTree是用于浏览器的高度互动的Voronoi树图可视化.

![demo](https://get.carrotsearch.com/foamtree/npm.jpg)

* * *

要在您的项目中添加泡沫依赖:

```shell
npm install @carrotsearch/foamtree
```

* * *

最简单的 [反应组件显示泡沫可视化](https://codesandbox.io/p/sandbox/foamtree-react-wrapper-boxt3)数字 :

```jsx
import { useEffect, useRef } from "react";
import { FoamTree } from "@carrotsearch/foamtree";

const FoamTreeView = ({ data }) => {
  const element = useRef(null);
  const foamtree = useRef(null);

  useEffect(() => {
    foamtree.current = new FoamTree({
      element: element.current,
      pixelRatio: window.devicePixelRatio || 1,
    });
    return () => {
      if (foamtree.current) {
        foamtree.current.dispose();
      }
    };
  }, []);

  useEffect(() => {
    if (foamtree.current) {
      foamtree.current.set({ dataObject: data });
    }
  }, [data, foamtree.current]);

  return (
      <div
          ref={element}
          style={{ width: "80vw", height: "50vh", margin: "auto" }}
      />
  );
};

export const App = ({}) => {
  const data = {
    groups: [
      { label: "Hello!",  weight: 20 },
      { label: "world!", weight: 10 },
      {}, {}, {}, {}, {},
      {}, {}, {}, {}, {},
      {}, {}, {}, {}, {},
      {}, {}, // some empty groups to fill the space
    ],
  };

  return (
      <div className="App">
        <FoamTreeView data={data} />
      </div>
  );
}
```

* * *

更多信息见:

-   [泡沫Tree网站](https://carrotsearch.com/foamtree/)
-   [FoamTree 演示和代码示例](https://get.carrotsearch.com/foamtree/latest/demos/)
-   [FomTree 文档](https://get.carrotsearch.com/foamtree/latest/api/)

* * *

显著特征 :

-   **非矩形布局**:视觉取悦非矩形布局 高效地利用现有空间.
    
-   **矩形树图**:也支持传统的平地和有秩序的长方形树图.
    
-   **缩放和曝光**:动画缩放并曝光互动 为浏览深筑巢分级.
    
-   **无尽定制**:每个单元格中自定义内容,包括额外的文本,形状或图像.
    
-   **非矩形容器**:将沃罗诺伊树马嵌入任何对流形状,如圆形或菱形.
    
-   **支持非常大的等级制度**:处理100克+节点在100克+级别上的分级,例如生命数据树.
    
-   **平分和分级堆放**:所有级别一次可见或采用自上而下渐进披露安排.
    
-   **多语种和易感性**:支持您浏览器可以显示的所有特殊字符,包括emoji.
    
-   **动画转换**:多种动画参数可以产生数十个推出和后退效应.
    
-   **广泛调谐**: 用于调试视觉属性的设置面板并导出到您的 JavaScript 代码 .
    

FoamTree自由使用胡萝卜搜索品牌. 执照钥匙,通过在 `licenseKey` 选项,解锁品牌选项; [联系人胡萝卜搜索](https://carrotsearch.com/contact) 许可证发放.

* * *

## 常见问题

### @carrotsearch/foamtree 是什么？

伏罗诺伊树图可视化\. 创新布局,动画互动,无限定制\.

### 如何安装 @carrotsearch/foamtree？

在项目目录运行 npm install @carrotsearch/foamtree，或使用 pnpm add / yarn add / bun add。

### @carrotsearch/foamtree 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/carrotsearch\_\_foamtree 是否存在。

### @carrotsearch/foamtree 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @carrotsearch/foamtree 可以商用吗？

@carrotsearch/foamtree 使用 SEE LICENSE IN LICENSE\.txt 许可。许可条款写在包内的独立文件中，请阅读该文件确认可否商用。以上为概括，不构成法律意见，请以许可原文为准。

### @carrotsearch/foamtree 的下载量有多少？

根据 npm 官方下载统计，@carrotsearch/foamtree 在 2026/10/09 – 2026/11/07 这 30 天内被下载 5,836 次，日均约 195 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @carrotsearch/foamtree 还在维护吗？

最新版本 3\.7\.0 发布于 2026/11/05（4 天前）；至今共发布 20 个版本，其中过去 12 个月发布了 7 个；首次发布于 2021/01/07。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。