D3.js D3显示来自API调用的文本_D3.js

D3.js D3显示来自API调用的文本

d3.js

D3.js D3显示来自API调用的文本,d3.js,D3.js,我在使用d3.json显示来自API调用的文本时遇到问题我有一个html文件 index.html <!DOCTYPE html> <html lnag="en"> <head> <meta charset="UTF-8"> <script src="d3.v5.js"></script> </head> <body> <div class="canvas"></

我在使用d3.json显示来自API调用的文本时遇到问题

我有一个html文件 index.html

<!DOCTYPE html>
<html lnag="en">
<head>
    <meta charset="UTF-8">
    <script src="d3.v5.js"></script>
</head>

<body>
<div class="canvas"></div>
</body>

<script src="index-API.js"></script>
</html>

对的api调用返回此对象

{completed: false
id: 1
title: "delectus aut autem"
userId: 1}

我在上面做了什么不正确的事情来获得标题：“deletus aut aut em”以文本形式显示在淡蓝色部分

非常感谢您的帮助

您需要提供数组或函数。你提供了一个对象。如果只希望显示一个对象，可以采用以下两种方法之一：

第一，将数据放入数组中：

 canvas2.selectAll("text")
     .data([data])

d3.json（“https://jsonplaceholder.typicode.com/todos/1")
。然后（数据=>{
const canvas2=d3.select（“body”）.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
.style（“背景色”、“浅蓝色”）；
画布2.选择全部（“文本”）
.数据（[数据]）
.输入（）
.append（“文本”）
.attr（“填充”、“红色”）
.attr（“字体大小”，20）
.attr（“x”，100）
.attr（“y”，150）
.text（函数（d）{返回d.title；}）
});
将数据放在方括号中：.data（[data]）。谢谢安德鲁！查看代码片段中的差异并了解datum方法的存在非常有帮助。
 canvas2.selectAll("text")
     .data([data])