javascript - 如何通过 D3 重复和延迟对 API 的调用

Question

调用一次获取数据的API并不难，难的是如何让它持续进行。比如每 5 秒生成一次对某个 API 的调用？有什么方法可以在 d3.json() 上使用 .delay() 吗？

下面是只执行一次这个过程的代码:

<script src="http://d3js.org/d3.v5.min.js"></script>
<script>
d3.json("https://api.exchangeratesapi.io/latest")
  .then(function(data) {
    console.log(data);
  })
</script>

Answer 1

d3.json() 或其他 D3 获取函数没有什么不同(我指的是函数)。您可以将它放在 setInterval 中，或者，因为这是 D3 代码，所以可以放在 d3.interval 中。

这是一个简单的演示，我使用的是生成随机值的 API，而不是您的 API，因此您可以看到它是有效的:

getData();
d3.interval(getData, 5000);

function getData() {
  d3.json("https://randomuser.me/api/").then(function(data) {
    console.log(JSON.stringify(data.results[0].name));
  })
}

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

我是第一次按常规方式调用该函数，否则它只会在 5 秒后被调用。关于延迟，如果只调用一次，可以使用setTimeout(或d3.timeout)。