如何使用 d3 加载本地 json 文件？答案

【问题标题】：How can I load a local json file using d3?如何使用 d3 加载本地 json 文件？
【发布时间】：2019-06-07 11:12:14
【问题描述】：

我正在尝试创建地图，我一直在使用本教程https://newmedia.report/classes/coding/2018/mapping-in-d3/。我认为问题是我无法加载本地文件，但我不知道如何解决它。

我查看了其他 StackOverflow 答案，但一直遇到同样的问题。我尝试设置一个开发服务器，但它仍然无法正常工作。我也尝试在 firefox 中使用相同的代码并得到错误 The Same Origin Policy disallows reading the remote resource at the file。（原因：CORS 请求不是 HTTP）。然后在尝试获取资源时出现错误提示 TypeError: NetworkError。

我正在使用教程中的所有相同代码，但它不起作用。

    Promise.all([
      d3.json("ccc_precinct_topo.json"), 
      d3.csv("CCC_Primary_results.csv") 
    ])
    .then(function(data){

对于 CORS 请求，URL 方案必须是“HTTP”或“HTTPS”。对于这两个文件，我不断收到这样的错误。

【问题讨论】：

你看过这里吗？ stackoverflow.com/questions/17214293/…
@gothmogg 是的，我查看了许多 stackoverflow 帖子并尝试过，但我仍然遇到问题
你知道你不能通过ajax加载本地文件，你必须使用HTTP服务器，对吧？
@Noam 我想我试图改变这一点。也许我做错了。最好的方法是什么？如果它不起作用，为什么教程会说这样做？
他们可能假设你在使用服务器，毕竟他们教你使用 d3.js，而不是从头开始教 js。你的电脑上安装了 python 或 PHP 吗？

标签： javascript html d3.js

【解决方案1】：

推荐的方法是在您的开发系统上安装一个 Web 服务器，例如XAMPP 用于 Windows 或 LAMP 用于 Linux 系统。否则，每当您使用 AJAX 调用进行测试时，您都会遇到某种问题。

仅出于演示目的，您可以将 JSON 和 CSV 数据保存为局部变量。为此，请将 JSON 文件“ccc_precinct_topo.json”的内容复制到数组data[0]：

var data= [];
data[0]= [...]; // contents of "ccc_precinct_topo.json"

第二步，将 CSV 文件“CCC_Primary_results.csv”的内容作为字符串保存到新变量中，并使用d3.csv.parse() 将其转换为数组结构：

var csvContent= 'String|With|CSV|Values';
data[1]= d3.csv.parse(csvContent);

现在看看你是否得到正确的值，将数据发送到控制台：

console.log(data);

打开开发者工具（按 F12）并刷新页面。在控制台部分，您应该看到一个包含两个元素的数组，两者都应该是数组结构。

不要使用 Promises 和 d3.json(), d3.csv()，而是继续使用您在 .then(function(data){ 下方找到的代码。

附：在大多数情况下，编写有关 Web 服务或页面的教程的人假设显示的代码将用作 Web 项目的一部分，因此将由 Web 服务器加载。但你是对的，它可以作为先决条件被提及，例如"在开始之前，请在您的开发系统上设置 LAMP 或 XAMPP"。

【讨论】：