Javascript D3.js JSON.parse意外字符

我创建了一个使用本地JSON文件的D3图形。现在我想利用MySQL数据库，在这里我编写了一个PHP脚本来获取数据。该脚本正在工作，但我收到一个解析错误，只要我给我的D3图形提供它

在DB和PHP处理方面，我是个新手。我猜我的Javascript文件无法正确解析PHP结果，因为本地JSON文件以

“节点”…

开始，而不是

“0”

我如何解决这个问题

JSON文件如下所示：

{
 "nodes": [
  { "id": 0, "type": "food" },
  { "id": 1, "type": "drinks" },
  { "id": 2, "type": "snacks" }
 ]
}

PHP脚本和输出：

<?php
$username = "root"; 
$password = "root";   
$host = "localhost";
$database="idep3";

$connection = mysqli_connect($host, $username, $password, $database);
$connection2 = mysqli_select_db($connection, $database);

$myquery = "
SELECT * FROM idep3.nodes";

$query = mysqli_query($connection, $myquery);

if ( ! $query ) {
    echo mysql_error();
    die;
}

$data = array();

for ($x = 0; $x < mysqli_num_rows($query); $x++) {
    $data[] = mysqli_fetch_assoc($query);
}

echo json_encode($data, JSON_FORCE_OBJECT);     
 
mysqli_close($connection);
?>

最后是图表：

D3v6数据库演示
身体{
背景色：#e6e7ee；
}
圈{
笔画：黑色；
笔画宽度：1px；
光标：指针；
}
const data=“connection.php”；
const onLoad=graph=>{
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，窗口.innerWidth）
.attr（“高度”，窗口内部高度）
.attr（“类”、“svg”）
.call（d3.zoom（）.on（“zoom”），函数（事件）{
attr（“transform”，event.transform）
}))
.附加（“g”）
d3.选择（“svg”）。打开（“dblclick.zoom”，null）
//var linkContainer=svg.append（“g”）.attr（“class”，“linkContainer”）
var nodeContainer=svg.append（“g”）.attr（“class”，“nodeContainer”）
var forceLayout=d3.forceSimulation（）
.力（“电荷”，d3.力人体（）.力（-25））
.力（“中心”，d3.力中心（窗内宽度/2，窗内高度/2））
.力（“碰撞”，d3.力碰撞（）.半径（50））
//###############################################
//##################初始化#################
//###############################################
init（）
函数init（）{
节点=节点容器。选择全部（“.node”）
.data（graph.nodes，函数（d）{return d.id；}）
.加入（“g”）
.attr（“类”、“节点”）
.attr（“id”，函数（d）{return“node”+d.id；}）
.call（d3.drag（）
.on（“开始”，拖动开始）
.打开（“拖动”，拖动）
.开启（“结束”，绘图）
)
节点。选择全部（“圆”）
.数据（d=>[d]）
.加入（“圈”）
.attr（“r”，40）
.style（“填充”、“白烟”）
.on（“单击”，添加节点）
节点。选择全部（“文本”）
.数据（d=>[d]）
.join（“文本”）
.attr（“主要基线”、“中心”）
.attr（“文本锚定”、“中间”）
.attr（“id”，函数（d）{return“text”+d.id}）
.attr（“指针事件”、“无”）
.文本（功能（d）{
返回d.id+“”+d.type
})
强制布局
.nodes（图.nodes）
.on（“滴答”，滴答）
}
//添加节点函数
函数addNode（事件，d）{
thisNode=d
var newNode={
“id”：graph.nodes.length+1，
“类型”：“饮料”，
x:thisNode.x，
y:这个节点
}
graph.nodes.push（newNode）
init（）
}
//勾号函数
函数tick（）{
nodes.attr（“转换”，函数（d）{
返回“translate”（“+d.x+”，“+d.y+”）；
});
}
//阻力函数
函数dragStarted（事件，d）{
如果（！event.active）forceLayout.alphaTarget（0.3）.restart（）；
d、 fx=d.x；
d、 fy=d.y；
}
函数（事件，d）{
d、 fx=事件x；
d、 fy=事件y；
}
函数Draged（事件，d）{
如果（！event.active）forceLayout.alphaTarget（0）；
d、 fx=未定义；
d、 fy=未定义；
}
}
d3.json（data.then（onLoad.catch）（err=>console.log（err））

您确定客户端代码成功检索了您的数据，即PHP脚本的输出吗？Fetch API仅拒绝对硬网络错误的承诺！就获取而言，404未找到或500服务器错误仍然是成功的响应。将

console.log（图形）

放在

onLoad（）函数的开头。在这些资源中有一个错误：和。您有一个错误。仅适用于旧API。请考虑切换错误模式。高积云我什么也没收到。至少在Firefox上是这样。我在“FirefoxwithFirebug”中执行HTML，并接收CORS请求，而不是HTTP。这让我更加困惑。当然不是HTTP。我想传递本地PHP文件的输出，该文件包含MySQL查询。@Dharman感谢您的提醒。是的，它应该固定为，但它与当前问题无关。对未来的进展仍然很重要。
 {"0":{"id":"0","type":"food"},"1":{"id":"1","type":"drinks"},"2":{"id":"2","type":"snacks"}}