从零入门，打造炫酷3D柱状图（纯JavaScript）

构建3D柱状图

绘制基础立方体

首先，我们需要绘制一个最简单的立方体。把这个图形看作是在笛卡尔坐标系（或者说是直角坐标系）中的3个几何形状的组合，看起来就像下图一样。需要注意的是，在SVG的坐标系中，y轴的正方向是向下的。

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M 0,0 L 200,0 L 200,200 L 0,200 Z" stroke="black" fill="white" />
  <path d="M 0,100 L 200,100 L 200,200 L 0,200 Z" stroke="black" fill="gray" />
  <path d="M 100,0 L 100,100 L 200,100 L 200,0 Z" stroke="black" fill="gray" />
</svg>

添加细节

现在，我们已经有了立方体的基本形状。为了使其看起来更具立体感，我们可以添加一些细节，例如阴影和高光。

<svg width="200" height="200" viewBox="0 0 200 200">
  <path d="M 0,0 L 200,0 L 200,200 L 0,200 Z" stroke="black" fill="white" />
  <path d="M 0,100 L 200,100 L 200,200 L 0,200 Z" stroke="black" fill="gray" />
  <path d="M 100,0 L 100,100 L 200,100 L 200,0 Z" stroke="black" fill="gray" />
  <path d="M 100,100 L 200,100 L 200,200 L 100,200 Z" stroke="white" fill="white" />
  <path d="M 0,0 L 100,0 L 100,100 L 0,100 Z" stroke="white" fill="white" />
</svg>

调整视角

为了让立方体看起来更像3D的，我们可以调整视角。这可以通过改变视点和观察角度来实现。

<svg width="200" height="200" viewBox="-100 -100 400 400">
  <path d="M 0,0 L 200,0 L 200,200 L 0,200 Z" stroke="black" fill="white" />
  <path d="M 0,100 L 200,100 L 200,200 L 0,200 Z" stroke="black" fill="gray" />
  <path d="M 100,0 L 100,100 L 200,100 L 200,0 Z" stroke="black" fill="gray" />
  <path d="M 100,100 L 200,100 L 200,200 L 100,200 Z" stroke="white" fill="white" />
  <path d="M 0,0 L 100,0 L 100,100 L 0,100 Z" stroke="white" fill="white" />
</svg>

绘制柱状图

现在，我们已经掌握了绘制立方体的方法。接下来，我们可以利用这些知识来绘制柱状图。

首先，我们需要创建一个与柱状图数据相对应的立方体数组。然后，我们可以使用循环来遍历数组，并为每个立方体创建一个SVG元素。最后，我们将这些SVG元素添加到一个SVG容器中，并将其显示在页面上。

<svg width="600" height="400" viewBox="0 0 600 400">
  <g transform="translate(50, 50)">
    <path d="M 0,0 L 200,0 L 200,200 L 0,200 Z" stroke="black" fill="white" />
    <path d="M 0,100 L 200,100 L 200,200 L 0,200 Z" stroke="black" fill="gray" />
    <path d="M 100,0 L 100,100 L 200,100 L 200,0 Z" stroke="black" fill="gray" />
    <path d="M 100,100 L 200,100 L 200,200 L 100,200 Z" stroke="white" fill="white" />
    <path d="M 0,0 L 100,0 L 100,100 L 0,100 Z" stroke="white" fill="white" />
  </g>
  <g transform="translate(300, 50)">
    <path d="M 0,0 L 200,0 L 200,400 L 0,400 Z" stroke="black" fill="white" />
    <path d="M 0,200 L 200,200 L 200,400 L 0,400 Z" stroke="black" fill="gray" />
    <path d="M 100,0 L 100,200 L 200,200 L 200,0 Z" stroke="black" fill="gray" />
    <path d="M 100,200 L 200,200 L 200,400 L 100,400 Z" stroke="white" fill="white" />
    <path d="M 0,0 L 100,0 L 100,200 L 0,200 Z" stroke="white" fill="white" />
  </g>
</svg>

添加交互

为了使柱状图更加生动，我们可以添加一些交互。例如，我们可以让用户悬停在柱状图上时显示数据信息。

<svg width="600" height="400" viewBox="0 0 600 400">
  <g transform="translate(50, 50)">
    <path d="M 0,0 L 200,0 L 200,200 L 0,200 Z" stroke="black" fill="white" />
    <path d="M 0,100 L 200,100 L 200,200 L 0,200 Z" stroke="black" fill="gray" />
    <path d="M 100,0 L 100,100 L 200,100 L 200,0 Z" stroke="black" fill="gray" />
    <path d="M 100,100 L 200,100 L 200,200 L 100,200 Z" stroke="white" fill="white" />
    <path d="M 0,0 L 100,0 L 100,100 L 0,100 Z" stroke="white" fill="white" />
  </g>
  <g transform="translate(300, 50)">
    <path d="M 0,0 L 200,0 L 200,400 L 0,400