当青训营遇上码上掘金：可视化三维攒青豆

当青训营遇上码上掘金

码上掘金

码上掘金是由稀土掘金推出的一款面向开发者的在线 code playground 服务，旨在为每一位热爱技术的人提供一个快速分享、交流编码知识的平台。 用户无需搭建部署环境，只需编写核心代码即可快速在线获得运行效果预览。

——「码上掘金」新手指南

用起来和掘金整合的体验还是很不错的。 编辑时看到了很熟悉的下拉菜单，查了一下是 Monaco Editor，是 VS Code 的编辑器。 直接来看看整合效果吧：请先不要问为什么这似乎和原本的题目不太一样 :P

结果就是展示很方便，比直接贴一段代码好多了，原本是算法题可以用 Java 之类的语言写的（码上掘金竟然也支持 Java），现在改成了 JS 用 Vue 来可视化。

二维攒青豆

现有 $n$ 个宽度为 $1$ 的柱子，给出 $n$ 个非负整数依次表示柱子的高度，排列后如下图所示。 此时均匀从上空向下撒青豆，计算按此排列的柱子能接住多少青豆。

题目并不难，甚至可以说是某种模板题。思路还挺多的。

第一种思路：填入

这个时候一种很常见的做法就是单调栈。在攒青豆里我们做的主要是：

1. 从左到右扫描柱的高度。

2. 当底部高度降低的时候将它们记录下来，不必进行其它操作。

3. 当底部高度相比前面的某个柱子升高的时候，这意味着前面可能形成了可以装青豆的空间：

   1. 我们根据前面记录下来的柱子计算可以装入多少青豆。
   2. 此时被青豆没过的柱子不会影响后续计算，可以直接从记录中移除。

把这种方法用栈作为数据结构实现，再进行一些优化，这基本就是单调栈了。 代码放码上掘金片段里了。

第二种思路：直接确定青豆面高度

我们知道青豆能够达到的高度是左右两侧最高柱子的高度的最小值。 所以对于每一个柱面我们都可以直接计算出它们青豆堆叠的高度，进而求和算出青豆的量。

最无脑的话就是每一个柱子各算一遍左右的最小值，改进一下可以从左到右、从右到左各扫描一遍。 （也看到有大佬用了双指针进一步优化了。）

总之扫描两遍的算法的代码也放在了码上掘金片段里了。

第三种思路：怎么会有这种思路呢

我们先把豆面高度全部设为例如 INT_MAX，然后从左到右、从右到左模拟青豆流出，最后剩下的没能流出去的青豆就是容量。其实这种二维青豆里这个算法就是直接确定青豆面高度的算法，还更复杂一些。那我们不妨来看一下三维的情况。

三维攒青豆

给题目加上两个上标：

这个时候我们没法直接确定青豆面高度，而只能各种遍历。用上面的思路：

1. 豆面高度设为 INT_MAX
2. 将边缘柱子的青豆面高度设为柱面高度
3. 在每次更改某一处的青豆面高度时，检查此处的上下左右四边的柱子，如果它们的青豆可以从当前柱子流出，那么相应调整它们的豆面高度
   • 可以流出也即 上/下/左/右豆面高度 > max(当前豆面高度, 上/下/左/右柱面高度)

最终效果就是上面演示的效果。

ECharts

Apache ECharts 是一个基于 JavaScript 的开源可视化图表库。 而 ECharts GL 是它的一个扩展，基于 WebGL 实现了对三维的图表的可视化。

在码上掘金使用 ECharts GL 只需要在依赖上加入 CDN 链接即可，例如：

https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js
https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js