D3-Graphviz无法将DOT有向图渲染至SVG元素的排查求助

各位好，我现在卡在了D3-Graphviz渲染DOT图的问题上，想请大家帮忙看看哪里出了问题。

先给大家看我的代码：

核心渲染函数 #

export async function drawTechTree(techData, svgElement) {
    let graphDef = "digraph TechTree {\n";
    graphDef += 'node [style="filled", color="black", fontcolor="white", fillcolor="black", fontname="Arial"];\n';

    for (const [key, value] of Object.entries(techData)) {
        const price = value.price || "Unknown";
        const label = `<b>${key}</b><br/>Price: ${price}`;
        graphDef += `${key} [label=<${label}> shape="box"];\n`;
    }

    for (const [key, value] of Object.entries(techData)) {
        const appearsAt = value.appearsAt || [];
        if (appearsAt.length > 1) {
            for (let i = 1; i < appearsAt.length; i++) {
                const prereq = appearsAt[i];
                if (prereq) {
                    graphDef += `${prereq} -> ${key};\n`;
                }
            }
        }
    }

    graphDef += "}";

    console.log("Graph definition:", graphDef);

    try {
        console.log("Rendering graph...");
        await new Promise((resolve, reject) => {
            d3.select(svgElement)
                .graphviz()
                .zoom(false)
                .renderDot(graphDef)
                .on("end", () => {
                    console.log("Graph rendered successfully");
                    resolve();
                })
                .on("error", (err) => {
                    console.error("Error while rendering the graph:", err);
                    reject(err);
                });
        });
    } catch (error) {
        console.error("An error occurred during graph rendering:", error);
    }
}

函数调用代码 #

fetch('./resources/techData.json')
.then((response) => response.json())
.then((techData) => {
    drawTechTree(techData, '#techTreeSvg');
})
.catch((error) => console.error('Error loading tech data:', error));

现在遇到的问题 #

• 生成的graphDef是完全合法的DOT字符串，我把它复制到在线DOT渲染工具里能正常生成图形
• 页面中的SVG元素确实存在，ID是#techTreeSvg，在DOM里能找到它
• 调用renderDot(graphDef)之后完全没有反应，on("end")事件根本不会触发，连最基础的测试用例digraph {a -> b}也无法渲染出来
• 控制台里只有一些关于Web Worker的输出，没有任何渲染相关的错误提示
• 我试过去掉包裹的Promise，直接执行渲染逻辑，结果还是一样，没有任何变化

已尝试的排查步骤 #

• 确认SVG元素有明确的宽高设置，排除因尺寸为0导致看不到图形的可能
• 检查了d3和d3-graphviz的依赖版本，确保是最新的稳定版
• 单独测试极简DOT字符串，排除是数据或DOT生成逻辑的问题
• 尝试移除zoom(false)配置，结果没有任何变化

有没有朋友遇到过类似的情况？或者能帮我看看代码里有没有什么容易忽略的细节？麻烦大家了！

备注：内容来源于stack exchange，提问作者Leigh Hobson