gl-datatree

基于 threejs 封装的 3D 树可视化组件
webgl 3d data tree.

简介

数据可视化方面，二维方面的组件早已形成一个完整、成熟的体系；各类图表库层出不穷。 在三维方面，无论表达形式还是交互方式，都十分灵活，有着很大的拓展空间； 在三维世界里面，数据可视化要形成一个完整的体系，还需要很多探索。

gl-datatree 组件也许并不是一个很好的解决方案，但是一次不错的尝试。

API

• init

  接收参数	返回内容
  HTMLElement	object（setOption、updateTooltip、dispose）

• setOption

  属性	类型	介绍	是否必须
  title	string	组件标题	否
  data	array	见下面的 data type	是
  autoRotate	boolean	场景自动旋转	否（默认 false）
  autoPlay	boolean	图例自动轮播	否（默认 false）
  playInterval	number	自动轮播间隔时常（毫秒）	否（默认 3000）
  listening	object	回调监听事件 见下面 listening type	否

  data type

  属性	类型	介绍	是否必须
  label	string	节点名称	是
  id	string number	节点 ID	是
  pid	string number	节点父级 ID	是
  children	array	子节点数据	否
  position	object	自定义节点位置（第一个节点默认(0, 10, 0)）	否

  listening type

  属性	类型	介绍	是否必须
  onSelected	function (userData: object, domPosition: DomPositionType) => void	鼠标移动到节点的回调	否

  DomPositionType

  属性	类型	介绍	是否必须
  x	number	三维对象映射到 document body 的 x 方向实际位置	是
  y	number	三维对象映射到 document body 的 y 方向实际位置	是
  offsetX	number	显示 tooltip 的 x 方向偏移量	否（默认值 20）
  offsetY	number	显示 tooltip 的 y 方向偏移量	否（默认值 15）

  position type

  属性	类型	介绍	是否必须
  x	number	三维对象 x 轴位置	是
  y	number	三维对象 y 轴位置	是
  z	number	三维对象 z 轴位置	是

  showData type

  属性	类型	介绍	是否必须
  label	string	标签	是
  value	string	number	标签对应的值

• updateTooltip 类型： function 接收参数： title 图例标题 showData 图例数据（Array） 见 showData type domPosition 图例位置 功能： 更新内置 tooltip

• dispose 类型： function 功能： 释放组件内部对象

use

📦 安装

npm install gl-datatree --save

yarn add gl-datatree

🔨 示例

你可以参考 github example 的示例

import GlDataTree from 'gl-datatree';

// 实例化
const glTree = new GlDataTree().init(HTMLElement);
glTree.setOption({
  title: '组织架构树',
  data: orgTree, // 节点数据
  autoRotate: false,
  autoPlay: true,
  listening: {
    onSelected: (userData, domPosition) => {
      const showData = []; // userData数据自定义处理
      // 你也可以不使用 updateTooltip 方法 创建自己的tooltip
      glTree.updateTooltip({
        title: userData.label,
        showData,
        domPosition,
      });
    },
  },
});
// 销毁
glTree.dispose();

future

• 未来有可能提供的功能

  场景切换 、多种类节点位置计算方案、更多的事件监听、节点/连线样式自定义配置……

• 未来可能提供的其他组件

  3D 全方位雷达图、3D 拓扑图 、场景化抽象数据展示等

github

Jared