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

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){

對於CORS請求，URL方案必須為“ HTTP”或“ HTTPS”。 我兩個文件都不斷出現這樣的錯誤。

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）並刷新頁面。 在“控制台”部分，您應該看到一個包含兩個元素的數組，兩個元素都應該是數組結構。

不要使用Promises和d3.json(), d3.csv()繼續在d3.json(), d3.csv() .then(function(data){下面找到的代碼。

---

PS在大多數情況下，如果有人編寫有關Web服務或頁面的教程，則假定所顯示的代碼將用作Web項目的一部分，因此將由Web服務器加載。 但是您是對的，它可能已經被提到為先決條件，例如“在開始之前，在開發系統上設置LAMP或XAMPP”。