如何让Plotly treemap中的vscode://协议链接正常生效

1. 原模板代码存在基础语法错误：第二个<a>标签的href属性缺少闭合单引号，会导致HTML标签解析异常。
2. Plotly渲染SVG类图表（包括treemap树形图）时，内置的链接安全白名单默认仅放行http:///https:///ftp:///mailto://这类通用协议，vscode://这类自定义协议默认会被拦截，无法触发跳转——该限制来自Plotly的默认安全策略，并非SVG本身不支持自定义协议。

根据当前使用的Plotly版本，二选一即可：

方法1：配置协议白名单（Plotly 5.11.0及以上版本推荐） #

高版本Plotly支持直接通过配置项扩展允许跳转的协议列表，无需额外编写JS逻辑，操作步骤：

• 修正模板内a标签的语法错误，补全href属性的闭合引号
• 导出HTML时传入config参数，将vscode加入允许的协议白名单

完整实现代码：

import plotly.express as px

# 修正a标签引号闭合问题，vscode链接的href属性末尾补全单引号
TEMPLATE="""
%{label}<br>
Link1: <a href='http://example.com'>http示例</a>
Link2: <a href='vscode://file/somefile'>打开本地文件</a>
"""

def create_treemap():
    names = ['parent', 'child-1', 'child-2']
    ids = [1, 2, 3]
    parents = [None, 1, 1]
    values = [10, 5, 5]

    fig = px.treemap(names=names, ids=ids, parents=parents, values=values,
                    branchvalues='total', title="My Treemap")
    fig.update_traces(texttemplate=TEMPLATE)
    return fig

# 导出时配置允许vscode协议跳转
create_treemap().write_html(
    "test.html",
    config={
        "allowedLinkProtocols": ["http", "https", "vscode"]
    }
)

方法2：自定义JS绑定点击事件（兼容所有Plotly版本） #

如果使用的Plotly版本较低，不支持allowedLinkProtocols配置项，可以在导出HTML时注入一段JS代码，手动为vscode链接绑定跳转逻辑，实现代码：

import plotly.express as px

TEMPLATE="""
%{label}<br>
Link1: <a href='http://example.com'>http示例</a>
<!-- 为vscode链接添加专属class，方便JS定位 -->
Link2: <a href='vscode://file/somefile' class='vscode-jump'>打开本地文件</a>
"""

def create_treemap():
    names = ['parent', 'child-1', 'child-2']
    ids = [1, 2, 3]
    parents = [None, 1, 1]
    values = [10, 5, 5]

    fig = px.treemap(names=names, ids=ids, parents=parents, values=values,
                    branchvalues='total', title="My Treemap")
    fig.update_traces(texttemplate=TEMPLATE)
    return fig

# 注入自定义JS处理vscode协议跳转
jump_handler_js = """
<script>
const bindVscodeJump = () => {
  document.querySelectorAll('.vscode-jump').forEach(link => {
    // 避免重复绑定事件
    if(link.dataset.binded) return;
    link.dataset.binded = '1';
    link.addEventListener('click', (e) => {
      e.stopPropagation();
      e.preventDefault();
      window.open(link.getAttribute('href'));
    })
  })
}
// 图表首次渲染完成、窗口resize重绘后重新绑定事件
setTimeout(bindVscodeJump, 300);
window.addEventListener('resize', () => setTimeout(bindVscodeJump, 200));
</script>
"""

create_treemap().write_html("test.html", post_script=jump_handler_js)

本地打开生成的HTML文件第一次点击vscode链接时，浏览器会弹出安全确认框，询问是否允许打开VSCode，点击允许后即可正常跳转，该限制来自浏览器的安全策略，与Plotly无关。

内容的提问来源于stack exchange，提问作者Philip