如何在d3-graphviz中加载GV文件？代码报错求助

控制台报错「Failed to execute ReadAsText as parameter 1 is not of type "Blob"」的核心原因是：FileReader.readAsText()要求传入Blob或File对象，但你传入的是字符串文件名'G.gv'，不符合API参数要求。另外，FileReader的设计用途是处理用户通过浏览器选择的本地文件（比如<input type="file">），无法直接加载本地文件系统或服务器上的静态文件。

无需将GV内容硬编码到JS中，通过HTTP请求加载文件是标准可行的方案，下面提供两种适配d3-graphviz的实现方式：

方案1：使用d3.text()加载（推荐，与d3生态更契合） #

修改后的完整代码如下：

<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>

<script>
let graphviz = d3.select("#graph").graphviz()
    .transition(function () {
        return d3.transition("main")
            .ease(d3.easeLinear)
            .delay(500)
            .duration(1500);
    })
    .logEvents(true)
    .on("initEnd", render);

function render() {
    // 用d3.text加载GV文件
    d3.text('G.gv')
        .then(dotContent => {
            graphviz
                .addImage("images/Officer.png", "50px", "50px")
                .addImage("images/Manager.png", "50px", "50px")
                .addImage("images/Employee.png", "50px", "50px")
                .addImage("images/Service.png", "50px", "50px")
                .addImage("images/MainOfficer.png", "50px", "50px") // 补充GV中用到的图片注册
                .renderDot(dotContent);
        })
        .catch(error => {
            console.error("加载GV文件失败:", error);
        });
}
</script>

方案2：使用原生fetch API加载 #

如果不想依赖d3的加载方法，可使用原生fetch实现：

<script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
<script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
<div id="graph" style="text-align: center;"></div>

<script>
let graphviz = d3.select("#graph").graphviz()
    .transition(function () {
        return d3.transition("main")
            .ease(d3.easeLinear)
            .delay(500)
            .duration(1500);
    })
    .logEvents(true)
    .on("initEnd", render);

function render() {
    fetch('G.gv')
        .then(response => {
            if (!response.ok) throw new Error(`HTTP错误: ${response.status}`);
            return response.text();
        })
        .then(dotContent => {
            graphviz
                .addImage("images/Officer.png", "50px", "50px")
                .addImage("images/Manager.png", "50px", "50px")
                .addImage("images/Employee.png", "50px", "50px")
                .addImage("images/Service.png", "50px", "50px")
                .addImage("images/MainOfficer.png", "50px", "50px") // 补充缺失的图片注册
                .renderDot(dotContent);
        })
        .catch(error => {
            console.error("加载GV文件失败:", error);
        });
}
</script>

• 确保G.gv与HTML文件路径匹配，若文件在子目录中，需修改路径（如'data/G.gv'）。
• 你的GV文件中用到了images/MainOfficer.png，但原JS代码未注册该图片，需补充addImage调用，否则图片无法正常渲染。
• 若本地直接打开HTML文件（file://协议），可能触发CORS限制，建议用本地服务器运行（比如Python的python -m http.server或Node.js的http-server）。

内容的提问来源于stack exchange，提问作者Hoang Cuong Nguyen