如何用本地myJSON变量构建D3力导向图？求助ProgressEvent报错问题

首先，你遇到的错误核心原因是对d3.json()的用法理解有误：d3.json()的第一个参数需要是一个JSON文件的URL（比如data.json），它的作用是从网络或本地加载并解析JSON数据。而你直接传入了变量名"myJSON"，D3会尝试去请求名为myJSON的文件，自然找不到资源，所以抛出了ProgressEvent类型的错误。

正确的做法：直接使用已获取的myJSON变量 #

你已经通过jQuery的AJAX请求拿到了解析好的myJSON数据，完全不需要再调用d3.json()，直接把这个变量传入D3力导向图的初始化逻辑即可。

另外，强烈建议你把AJAX的async: false改成async: true（这也是默认值），同步请求会阻塞浏览器主线程，影响页面体验。我们可以把D3图表的初始化逻辑放到AJAX的success回调里，确保数据加载完成后再渲染图表。

修改后的代码示例：

$.ajax({
    type: "POST",
    url: "http://localhost/web/search.php",
    async: true, // 改回异步，避免阻塞页面
    data: { "dataA": string2 },
    cache: false,
    success: function(data) {
        const myJSON = JSON.parse(data);
        // 数据加载完成后，初始化D3力导向图
        initForceGraph(myJSON);
    },
    error: function(xhr, status, error) {
        console.error("AJAX请求失败:", error);
    }
});

// 封装D3图表初始化函数
function initForceGraph(graph) {
    // 这里写你的D3力导向图核心逻辑，示例框架如下：
    const svg = d3.select("svg");
    const width = +svg.attr("width");
    const height = +svg.attr("height");

    // 创建力模拟
    const simulation = d3.forceSimulation(graph.nodes)
        .force("link", d3.forceLink(graph.links).id(d => d.id))
        .force("charge", d3.forceManyBody())
        .force("center", d3.forceCenter(width / 2, height / 2));
    
    // 渲染连线
    const link = svg.append("g")
        .selectAll("line")
        .data(graph.links)
        .join("line");
    
    // 渲染节点
    const node = svg.append("g")
        .selectAll("circle")
        .data(graph.nodes)
        .join("circle")
        .attr("r", 5);
    
    // 绑定力模拟的tick事件更新元素位置
    simulation.on("tick", () => {
        link
            .attr("x1", d => d.source.x)
            .attr("y1", d => d.source.y)
            .attr("x2", d => d.target.x)
            .attr("y2", d => d.target.y);
        
        node
            .attr("cx", d => d.x)
            .attr("cy", d => d.y);
    });
}

额外注意事项 #

• 确认myJSON的结构符合D3力导向图的要求：需要包含nodes数组（每个节点至少有id属性）和links数组（每个连线至少有source和target属性，对应节点的id）。
• 如果后续还是有数据相关的错误，可以在success回调里用console.log(myJSON)打印数据，检查结构是否正确。

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