注解配置

注解允许您在代码执行期间自定义代码的可视化方式。通过在代码中特定位置添加特殊注释，您可以根据需要控制可视化行为。

可用注解

@hist=<var1>,<var2>,...

用途：切换一维数组的可视化形式为直方图，元素值决定条柱高度。

使用方法：

Python/JavaScript：放在代码文件开头
C++：放在main函数上方
变量必须是非负数的一维数组

示例：

// @hist=arr
const arr = [3, 1, 4, 2];

function visualizeData() {
    // 可视化时arr将显示为直方图
}

# @hist=scores,counts
scores = [85, 92, 78, 90]
counts = [10, 15, 8, 12]

def process_data():
    # 可视化时scores和counts将显示为直方图

std::vector<double> bubbleSort(std::vector<double> arr) {
  // 可视化时 arr 将显示为直方图
}

//@hist=arr
int main() {
    std::vector<double> result = bubbleSort(std::vector<double>{5, 2, 9, 1, 9, 9, 1, 2, 5.6, 0, 3});
    return 0;
}

正在生成交互式预览...

使用场景：

需要直观比较数组元素数值大小时
分析数据分布特征时
数组元素值域跨度较大，适合用高度差异展示时

@ignore-function-tree

用途：防止可视化工具在可视化树中绘制函数调用节点。

使用方法：将此注解直接放置在函数定义上方。

示例：

// @ignore-function-tree
function traverseTree(node) {
    if (!node) return;
    traverseTree(node.left);
    processNode(node);
    traverseTree(node.right);
}

# @ignore-function-tree
def traverse_tree(node):
    if node is None:
        return
    traverse_tree(node.left)
    process_node(node)
    traverse_tree(node.right)

正在生成交互式预览...

使用场景：此注解在以下情况特别有用：

可视化递归算法，特别是树遍历
您想要关注数据结构操作而不是函数调用
函数调用树会给可视化增加不必要的复杂性

可视化工具将不会为每个递归调用显示新的函数节点，而是只显示树节点之间的移动，使可视化更清晰并更专注于算法的行为。

@function-tree-once

用途：防止可视化工具在多个子树中绘制函数调用节点。

使用方法：将此注解直接放置在函数定义上方。

示例：

// @function-tree-once
function expandAroundCenter(s, left, right) {
    while (left >= 0 && right < s.length && s[left] === s[right]) {
        left--;
        right++;
    }
    return [left + 1, right - 1];
}

function longestPalindrome(s) {
    let start = 0, end = 0;
    for (let i = 0; i < s.length; i++) {
        const [left1, right1] = expandAroundCenter(s, i, i);
        const [left2, right2] = expandAroundCenter(s, i, i + 1);
        if (right1 - left1 > end - start) {
            start = left1;
            end = right1;
        }
        if (right2 - left2 > end - start) {
            start = left2;
            end = right2;
        }
    }
    return s.substring(start, end + 1);
}

longestPalindrome("babadcda")

# @function-tree-once
def expandAroundCenter(s, left, right):
    while left >= 0 and right < len(s) and s[left] == s[right]:
        left -= 1
        right += 1
    return left + 1, right - 1

def longestPalindrome(s: str) -> str:
    start, end = 0, 0
    for i in range(len(s)):
        left1, right1 = expandAroundCenter(s, i, i)
        left2, right2 = expandAroundCenter(s, i, i + 1)
        if right1 - left1 > end - start:
            start, end = left1, right1
        if right2 - left2 > end - start:
            start, end = left2, right2
    return s[start: end + 1]


longestPalindrome("babadcda")

正在生成交互式预览...

使用场景：此注解在以下情况特别有用：

您想要可视化递归函数调用但避免在不同子树中重复表示相同的函数
函数调用树会因为相同函数的重复实例而变得过于混乱
您希望保持算法流程的可视化更简洁清晰

@skip-function

用途：完全跳过函数的可视化执行，直接返回函数结果。

使用方法：将此注解直接放置在函数定义上方。

示例：

// @skip-function
function calculateSum(a, b) {
    return a + b;
}

function main() {
    const result = calculateSum(5, 10); // 可视化将跳过 calculateSum 的执行，直接显示结果为 15
}

main();

# @skip-function
def calculate_sum(a, b):
    return a + b

def main():
    result = calculate_sum(5, 10)  # 可视化将跳过 calculate_sum 的执行，直接显示结果为 15
    print(result)

main()

正在生成交互式预览...

使用场景：此注解在以下情况特别有用：

函数是工具函数或辅助函数，其内部逻辑与可视化无关。
您希望关注更高层次的操作，避免因简单或已理解的函数而干扰可视化。
函数的执行过程较为简单，对算法的理解没有显著贡献。

最佳实践

将注解直接放置在相关代码上方的单独一行
适度使用注解以保持清晰的可视化效果
在决定显示或隐藏执行的哪些部分时，要考虑您的受众

反馈和建议

如果您对新的注解类型或现有注解的改进有想法，欢迎为项目做出贡献或提交功能请求。