为何d3.json两种请求语法表现不同？Node live-server下的困惑

这其实是D3.js版本迭代带来的API设计变化，我给你理清楚背后的原因：

• 旧版D3（v4及更早）：回调式异步
  早期的D3把异步操作的处理逻辑放在回调函数里，d3.json的第二个参数就是用来接收数据的回调——当JSON文件加载完成后，D3会自动调用这个函数，并把解析好的数据传进去。这就是你看到示例里用的写法：

  d3.json("file.json", function(data){ 
    // 在这里处理数据
  });
  

• 新版D3（v5及以后）：Promise式异步
  从v5开始，D3官方把所有异步数据加载方法（包括d3.json、d3.csv等）都改成了返回Promise对象，不再支持直接传入回调作为第二个参数。这时候你需要用Promise的.then()方法来指定数据加载完成后的处理逻辑，也就是你在live-server里必须用的写法：

  d3.json("file.json").then(function(data){ 
    // 在这里处理数据
  });
  

  （顺便提一句，你写的代码里多了个空的回调参数，其实新版本里完全不需要传，直接调用d3.json("file.json")再链式调用.then()就好）

  而且新版本还支持更现代的async/await语法，写法会更简洁：

  async function loadAndProcessData() {
    const data = await d3.json("file.json");
    // 在这里处理数据
  }
  loadAndProcessData();
  

你遇到的差异，本质上是网上的示例用了较旧的D3版本，而你在live-server环境里引入的是新版D3导致的。现在主流的D3教程和项目都已经采用Promise式的写法了，更符合现代JS的异步编程习惯。

内容的提问来源于stack exchange，提问作者serban