feat/interval3d

[VirusPC]

interval3D，补充绘制 3D Bar Chart 的能力 #5477

改动

• 代码
  • shape/interval3D/cube: 用于绘制 interval3D。暂时支持 cube 一种 shape。
  • mark/interval3D：3D 版本的 interval。
• 测试用例
  • plots/api/chart-render-3d-bar-chart: 正交投影的 3D Bar Chart 。
  • plots/api/chart-render-3d-bar-chart-perspective：透视投影的 3D Bar Chart。
• 官网文档
  • 选项：3D 图表下新增 interval3D 页面。
  • API: Chart 页面新增interval3D 选项描述。

效果图

透视投影：

正交投影：

使用方式

使用方式类似 point3D

• 创建 WebGL 渲染器
• 注册以下两个插件：
  • https://g.antv.antgroup.com/plugins/3d
  • https://g.antv.antgroup.com/plugins/control
• 使用 WebGL 渲染器创建画布
• 声明可视化并渲染
• (可选)设置相机
• (可选)设置光照，创建光源并添加到画布

import { Renderer } from '@antv/g-webgl';
import { Plugin as ControlPlugin } from '@antv/g-plugin-control';
import { Plugin as ThreeDPlugin, DirectionalLight } from '@antv/g-plugin-3d';

// 准备数据
const data: { x: string; z: string; y: number; color: number }[] = [];
for (let x = 0; x < 5; ++x) {
  for (let z = 0; z < 5; ++z) {
    data.push({
      x: `x-${x}`,
      z: `z-${z}`,
      y: 10 - x - z,
      color: Math.random() < 0.33 ? 0 : Math.random() < 0.67 ? 1 : 2,
    });
  }
}

// 创建 WebGL 渲染器 
const renderer = new Renderer(); 
// 注册插件，提供 3D 相机交互
renderer.registerPlugin(new ControlPlugin());
// 注册插件，提供 3D Geometry、Material、光照等
renderer.registerPlugin(new ThreeDPlugin()); 

// 使用 WebGL 渲染器创建画布
const canvas = new Canvas({
  container: document.createElement('div'),
  renderer,
  depth: 400,
});

// 声明可视化
chart
  .interval3D()
  .data({
    type: 'inline',
    value: data,
  })
  .encode('x', 'x')
  .encode('y', 'y')
  .encode('z', 'z')
  .encode('color', 'color')
  .encode('shape', 'cube')
  .coordinate({ type: 'cartesian3D' })
  .scale('x', { nice: true })
  .scale('y', { nice: true })
  .scale('z', { nice: true })
  .legend(false)
  .axis('x', { gridLineWidth: 2 })
  .axis('y', { gridLineWidth: 2, titleBillboardRotation: -Math.PI / 2 })
  .axis('z', { gridLineWidth: 2 })
  .style('opacity', 0.7)
  .style('cursor', 'pointer');

// 渲染可视化，渲染后设置相机和光照
chart.render().then(() => {
  const { canvas } = chart.getContext();
  const camera = canvas!.getCamera();
  camera.setPerspective(0.1, 5000, 80, 1280 / 960);
  camera.setType(CameraType.ORBITING);
  camera.rotate(-20, -20, 0);

  // Add a directional light into scene.
  const light = new DirectionalLight({
    style: {
      intensity: 2.5,
      fill: 'white',
      direction: [-1, 0, 1],
    },
  });
  canvas!.appendChild(light);
});

TODO

• 官网补充图表示例
• 支持 interval 的各个图表的3D版本 (有些不适合3D场景的特性可能会舍弃)
  • 最简
  • 水平条形图
  • 分组
  • 堆叠
  • 其他

图表支持进度：

• 支持最简单的3D柱形图 https://g2.antv.antgroup.com/zh/examples/general/interval/#column
• 限制宽度 https://g2.antv.antgroup.com/zh/examples/general/interval/#column-maxwidth
• 对数 https://g2.antv.antgroup.com/zh/examples/general/interval/#column-log
• 水平 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar、
• 发散 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-diverging
• 区间 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-range、
• 微妙级 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-range-micro
• 堆叠 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-stacked
• 堆叠水平 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-stacked-horizontal
• 归一化 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-normalized-stacked
• 分组 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-dodged
• 弹性 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-flex
• 可变宽度 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-var-width
• 马赛克 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-marimekko
• 多轴 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-dual-axes
• 固定宽度圆角 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-fixed-cornered
• 圆角发散堆叠 https://g2.antv.antgroup.com/zh/examples/general/interval/#bar-stacked-diverging-rounded

[pearmini]

可以参考 #5412 这个的 PR 描述，在 PR 描述中简单添加一下事例代码和截图 🤣

[VirusPC]

原来如此，okok👌

[VirusPC]

已补充PR描述

[pearmini]

优秀呀，期待后续的图表能力！👍👍👍

[VirusPC]

冲冲冲！:rocket::rocket::rocket: