D3从v3升级到v7后图表无法渲染，求兼容PHP变量的适配写法

• D3从v5版本开始就废弃了v3的回调式异步请求API，全面切换为Promise风格调用方式，这是你原有代码升级后失效的核心原因。此外你原有v3代码本身存在逻辑冗余：你并未使用d3.json("mydata")请求返回的结果，而是直接用PHP输出的JSON给data变量赋值，等于多余发起了一个无用请求。

方案1：直接输出PHP变量到JS上下文（最高效，无需额外请求） #

你完全不需要调用d3.json发起网络请求，直接用PHP把JSON数据输出为JavaScript变量即可，写法如下：

// 无需JSON.parse，json_encode输出的内容本身是合法的JS对象/数组语法
const data = <?php echo json_encode($jsondata, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); ?>;

// 接下来直接用data渲染图表即可，不需要额外异步处理
// 你的图表渲染逻辑写在这里

注：后面加的JSON_HEX_*系列参数是为了转义特殊字符，避免数据包含用户输入内容时引发XSS安全问题，如果数据是完全可控的内部数据可以省略。

方案2：通过接口异步获取（适合数据需要动态更新的场景） #

如果你的图表数据需要在页面加载后动态更新，不想直接输出到页面初始内容里，可以单独做一个PHP接口返回JSON数据：

1. 新建get_chart_data.php文件，内容如下：

<?php
// 这里写你原来获取$jsondata的数据库查询逻辑
header('Content-Type: application/json');
echo json_encode($jsondata);
?>

2. 前端D3 v7用Promise风格调用即可，和你读静态json文件的用法完全一致：

d3.json("get_chart_data.php").then(function(data) {
    // 拿到data后渲染图表的逻辑
})

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