javascript - 将我的所有代码放在 d3.csv() 的参数中是否有问题？

Question

我正在学习 d3.js，最近我遇到了无法访问 d3.csv() 函数中的变量的问题。我刚刚在我的程序开始时初始化了我的变量，以使我的所有变量成为全局变量。

这让我想知道如果我将所有代码都放在 d3.csv 函数中是否会出现问题，甚至不需要在代码开头初始化我的变量，所以它看起来像:

d3.csv(data.csv, (data)=>{
    all of my code
});

这样做有缺点吗(假设我只使用一个 CSV 文件)或者将不需要数据的代码保留在 d3.csv 方法之外是否有一些好处？

Answer 1

_{注意:由于您询问的是 d3.csv 的回调，我假设您使用的是 D3 v4 或更低版本，因为 D3 v5 使用 then promise 的方法。然而，道理是一样的。}

---

最重要的信息是 d3.csv 与所有其他 D3 XHR 方法一样，是一个异步函数。这意味着回调中的所有内容仅在 CSV 下载并解析后运行。

//Outside the callback
//Code here runs immediately

d3.csv("example.csv", (data) => {
    //Inside the callback
    //Code here runs only after the CSV was downloaded and parsed
});

//Outside the callback
//Even if these lines come after d3.csv, code here runs before the code inside the callback

顺便说一句，这解释了您最初的提示(“......我最近遇到了无法访问 d3.csv() 函数中的变量的问题”)。 This answer是关于该主题的好读物。

考虑到这一点，我们必须以这样一种方式优化代码，即可以立即创建/设置不依赖于数据的事物，因为如果我们将它们放在回调中，我们将浪费时间而没有任何好处原因。

简而言之，您可以将诸如(但不限于)这样的回调放在外面:

• 选择/创建 SVG、 Canvas 或 HTML 容器
• 量表(有范围)
• 轴发生器
• 线发生器
• 区域生成器
• 堆栈生成器
• 饼图生成器
• 直方图生成器
• map 投影
• 层级布局
• 格式(如时间格式)
• 力模拟器
• 拖动行为
• 缩放行为

所有这些都不依赖于任何数据。对于其中一些(例如线生成器、区域生成器、堆栈生成器等...)，您将在获得数据后传递数据。

然后，在回调中，放置所有依赖于数据的内容，例如(但不限于):

• 更新、进入和退出选择
• Scale 的领域
• 调用坐标轴生成器
• 设置模拟的节点和链接
• 巢穴
• 将数据传递给线生成器、区域生成器、堆栈生成器等...
• 转换(取决于数据)
• 事件监听器(取决于数据)

如您所见，如果将 everything 放入回调中，您将拥有一堆可以立即运行的方法，但它们只是坐在那里不必要地等待数据待下载。