Question

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

我看过其他StackOverflow答案，但一直遇到相同的问题。我尝试设置开发服务器，但仍然无法正常工作。我也用相同的代码在firefox中尝试过，并收到错误消息Same Origin Policy不允许读取文件中的远程资源。（原因：CORS请求不是HTTP）。然后在尝试获取资源时出现错误，提示TypeError：NetworkError。

我正在使用本教程中的所有相同代码，但无法正常工作。

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

URL方案必须为“ HTTP”或“ HTTPS”才能进行CORS请求。对于这两个文件，我总是收到这样的错误。

Answer 1

推荐的方法是在开发系统上安装Web服务器，例如对于Windows，XAMPP，对于Linux系统，LAMP。否则，每当您使用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）并刷新页面。在“控制台”部分，您应该看到一个包含两个元素的数组，两个元素都应该是数组结构。

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

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

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

1 个答案: