文章/答案/技术大牛

发布

社区首页 >问答首页 >D3显示API调用中的文本

问D3显示API调用中的文本
EN

Stack Overflow用户

提问于 2020-02-28 21:36:34

回答 1查看 30关注 0票数 1

我在使用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>

我有js文件索引-API.js

//THIS WORKS
const canvas = d3.select(".canvas").append("svg")
.attr("width", 500)
.attr("height", 500)
.style("background-color", "lightgreen");

canvas.append("text")
.text("this works")
.attr("fill", "red")
.attr("font-size", 20)
.attr("x", 100)
.attr("y", 150)

//THIS DOESN'T WORK
d3.json("https://jsonplaceholder.typicode.com/todos/1")
.then(data =>{
    console.log(data);

    const canvas2 = d3.select(".canvas").append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .style("background-color", "lightblue");

    canvas2.selectAll("text")
        .data(data)
        .enter()
        .append("text")
        .attr("fill", "red")
        .attr("font-size", 20)
        .attr("x", 100)
        .attr("y", 150)
        .text(function (d) { return d.title; })

        console.log(canvas2);
    });

对https://jsonplaceholder.typicode.com/todos/1的api调用返回此对象。

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

我在上面做了什么不正确地得到标题："delectus aut autem“在lightblue部分显示为文本？

非常感谢您的帮助！

d3.js

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-02-28 22:16:06

您需要为selectAll().data()提供数组或函数。你在提供一个物体。如果您只想显示一个对象，则可以采取以下两种方法之一：

首先，将数据放在数组中：

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

d3.json("https://jsonplaceholder.typicode.com/todos/1")
  .then(data =>{

    const canvas2 = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .style("background-color", "lightblue");

    canvas2.selectAll("text")
        .data([data])
        .enter()
        .append("text")
        .attr("fill", "red")
        .attr("font-size", 20)
        .attr("x", 100)
        .attr("y", 150)
        .text(function (d) { return d.title; })

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

如果您只想绘制一个元素，则另一个选项是使用：

canvas2.append("text")
   .datum(data) // allows you to access the datum later in your chain.

d3.json("https://jsonplaceholder.typicode.com/todos/1")
  .then(data =>{

    const canvas2 = d3.select("body").append("svg")
        .attr("width", 500)
        .attr("height", 500)
        .style("background-color", "lightblue");

    canvas2.append("text")
        .datum(data)
        .attr("fill", "red")
        .attr("font-size", 20)
        .attr("x", 100)
        .attr("y", 150)
        .text(function (d) { return d.title; })

    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60459567

复制

相似问题

问D3显示API调用中的文本
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3显示API调用中的文本EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3显示API调用中的文本
EN