泡沫

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

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

npm install @carrotsearch/foamtree

最简单的 反应组件显示泡沫可视化数字 :

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网站
• FoamTree 演示和代码示例
• FomTree 文档

显著特征 :

• 非矩形布局:视觉取悦非矩形布局 高效地利用现有空间.

• 矩形树图:也支持传统的平地和有秩序的长方形树图.

• 缩放和曝光:动画缩放并曝光互动 为浏览深筑巢分级.

• 无尽定制:每个单元格中自定义内容,包括额外的文本,形状或图像.

• 非矩形容器:将沃罗诺伊树马嵌入任何对流形状,如圆形或菱形.

• 支持非常大的等级制度:处理100克+节点在100克+级别上的分级,例如生命数据树.

• 平分和分级堆放:所有级别一次可见或采用自上而下渐进披露安排.

• 多语种和易感性:支持您浏览器可以显示的所有特殊字符,包括emoji.

• 动画转换:多种动画参数可以产生数十个推出和后退效应.

• 广泛调谐: 用于调试视觉属性的设置面板并导出到您的 JavaScript 代码 .

FoamTree自由使用胡萝卜搜索品牌. 执照钥匙,通过在 licenseKey 选项,解锁品牌选项; 联系人胡萝卜搜索 许可证发放.