如何使用d3.js同步加载JSON数据？

Question

当我的网站首次初始化时，它会查询服务器以获取一些数据。在这些数据返回之前，我无法在页面上布置任何内容。使用d3.js，我可以使用d3.json()来获取我的数据，但由于它是异步的，我需要将整个页面逻辑放在回调函数中。如何请求数据并等待其返回？

- Uri Laserson

Answer 1

你现在的做法就是唯一的方法。回调函数必须是启动代码其余部分的函数。但你不需要将所有代码都放在回调函数中，可以引入间接性。因此，回调函数将调用另一个函数，该函数将包含当前回调函数中的内容。

- CL22

Answer 2

在JavaScript中使用同步请求并不推荐，因为它会阻塞整个线程，同时也无法与网页良好地交互。

如果您非要这样做，可以按照以下方式进行（使用jQuery）：

var jsonData;
jQuery.ajax({
  dataType: "json",
  url: "jsondatafile.json",
  async: false
  success: function(data){jsonData = data}
});

然而就像在 jQuery.ajax()文档 中所解释的那样，即使是由jQuery建议的，也不推荐同步请求:

Ajax中的"A"代表"异步(asynchronous)", 意味着操作是并行执行的，完成的顺序不能保证。$.ajax() 的 async 选项默认为 true，表示在发起请求后可以继续执行代码。强烈不建议将此选项设置为 false(从而使调用不再是异步的)，因为它会导致浏览器无响应。

最后，我不明白有什么阻止你以异步方式使用success属性中的任何函数。大多数情况下，改用异步请求的设计都是值得的。通过经验，调试使用同步请求的页面是很痛苦的（特别是当请求没有得到答复时......）。

- Christopher Chiche

---

用户询问的是d3，而不是jQuery。 - EdgeCaseBerg

感谢反馈。OP所要求的是如何进行同步请求，使用D3 API无法实现这一点，因为这不是应该采取的方式。我的回答提供了一种使用jQuery实现此功能的方法，并声明了一个大免责声明，说明这并不推荐。我编辑了我的答案，使其更清晰地表明它使用了jQuery，并且在一般情况下不应该这样做。 - Christopher Chiche