算法可视化

理解复杂数据结构的最佳方法是观察它们的实际运行情况。我们为各种数据结构和算法开发了交互式动画。 我们的可视化工具使用 HTML5 canvas 元素，以 JavaScript 编写，几乎可以在所有现代浏览器中运行——包括 iPhone 和 iPad 等 iOS 设备，甚至 Kindle 的网页浏览器！

如何使用可视化功能

这些可视化图表旨在尽可能直观易懂，但对于高级用法也有一些细微之处。以下是一个典型的二叉搜索树可视化图表：

算法特定控制

屏幕顶部（上图中红色方框所示）是算法相关的控件——这些控件会根据您正在可视化的算法而变化。 在本例中，您可以通过在相应的字段中输入文本并按回车键或单击相关按钮，在二叉搜索树中插入、删除或查找元素。单击打印按钮即可打印该树。 发出命令后，可视化过程将开始，您可以使用屏幕底部的通用动画控件进行控制。

通用动画控制

• 撤销操作(Skip Back) 如果您正在播放动画，此按钮将完全撤销当前命令。如果您不在播放动画，此按钮将撤销上一个命令。
• 后退(Step Back) 此按钮仅在您暂停当前动画（使用播放/暂停按钮）后才有效。后退一步，即可在当前动画中执行上一步操作。如果您当前未执行动画，则会返回上一个命令。您可以使用此按钮（通过多次按键）来回溯您执行过的所有操作。
• 播放/暂停(Play/Pause)切换播放模式（算法自由运行直至完成）和暂停模式（需要按“前进”或“后退”按钮来推进动画）。
• 向前一步(Step Forward) 此按钮仅在您已暂停当前动画（使用播放/暂停按钮）且当前动画尚未播放完毕时有效。在当前动画中向前迈一步。
• 快进(Skip Forward) 此按钮仅在当前动画尚未结束时可用。快进到当前动画的结尾。
• 动画速度滑块(Animation Speed) 更改动画速度。此滑块的值保存在 cookie 中，因此如果您有偏好的速度，只需设置一次即可。
• w、h、更改画布大小 更改显示区域的宽度/高度。更改会立即生效，但动画在新区域中不会居中，直到您重新加载页面。重新加载页面会清除当前动画，但宽度和高度值也会保存在 cookie 中，因此您只需更改一次此字段，之后如果您使用的是屏幕空间较大的智能手机或台式机，一切都会正常运行。
• 移动控件(Move Controls) 切换常规控件在网页顶部和底部的位置。

请注意，在观看动画时，前后切换很容易让人感到困惑——您可能会将 动画的下一步与上一步混淆，从而误解算法的工作原理。因此，在初次深入了解某个算法时，建议您只向前移动。