Skip to content

aisriver/gl-datatree

Repository files navigation

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

About

webgl 3d data tree

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published