使用絕對路徑在 d3.js 中加載 csv 文件

Question

如果 csv 文件位於同一工作目錄中，我可以加載它，例如：

.defer(d3.csv,"data.csv", function(d) { .. })

但是如果文件在另一個目錄中並且我傳遞了絕對路徑，則不會加載該文件：

.defer(d3.csv,"/home/path/data.csv", function(d) {..})

我得到代碼 404，消息文件未找到

我已經在運行本地 web 服務器

編輯

我正在關注本教程：

https://www.d3-graph-gallery.com/graph/choropleth_basic.html這是索引。html

<script>

    // The svg
    var svg = d3.select("svg"),
      width = +svg.attr("width"),
      height = +svg.attr("height");
    
    // Map and projection
    var path = d3.geoPath();
    var projection = d3.geoMercator()
      .scale(70)
      .center([0,20])
      .translate([width / 2, height / 2]);
    
    // Data and color scale
    var data = d3.map();
    var colorScale = d3.scaleThreshold()
      .domain([10, 30, 40, 50, 70, 100])
      .range(d3.schemeBlues[7]);
    
    // Load external data and boot
    d3.queue()
      .defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
      .defer(d3.csv, "data.csv", function(d) { data.set(d.codice, d.rtt); })
      .await(ready);
    
    function ready(error, topo) {
    
      // Draw the map
      svg.append("g")
        .selectAll("path")
        .data(topo.features)
        .enter()
        .append("path")
          // draw each country
          .attr("d", d3.geoPath()
            .projection(projection)
          )
          // set the color of each country
          .attr("fill", function (d) {
            d.total = data.get(d.id) || 0;
            return colorScale(d.total);
          });
        }
    
    </script>

如果文件data.csv與 index.html 的目錄相同，則該文件有效，但如果它在另一個目錄中則無效，我得到：

code 404, message File not found

Uncaught TypeError: topo is undefined
    ready http://localhost:8000/:43
    _call https://d3js.org/d3.v4.js:11174
    maybeNotify https://d3js.org/d3.v4.js:11251
    abort https://d3js.org/d3.v4.js:11244
    end https://d3js.org/d3.v4.js:11218
    call https://d3js.org/d3.v4.js:792
    respond https://d3js.org/d3.v4.js:11397

編輯 2

嘗試直接加載 csv 文件而不以這種方式下載它，但不起作用：

if (rows.length == 5) {
   createmap(createcsv(rows))
}
function createcsv(rows) {

    let csvContent = "data:text/csv;charset=utf-8,";

    csvContent ="codice,rtt"+"\r\n";

    rows.forEach(function(rowArray) {

        let row = rowArray.join(",");

        csvContent +=row+"\r\n";

    });

    return csvContent;

}


function createmap(map) {
d3.queue()
          .defer(d3.json, "https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson")
          .defer(d3.csv, mappa, function(d) { data.set(d.codice, d.rtt); })
          .await(ready)
}

Answer 1

這里有幾件事：

1. 確保您的 data.csv 和 dat.csv 命名不是問題。

2. 您是否嘗試訪問不在本地主機權限的 scope 中的目錄？ 您需要允許www-data訪問該路徑。 看來您正在嘗試訪問 /home/path/ ，它很可能不在 www-data 訪問的 scope 之下。 或者只是嘗試將 data.csv 放在/var/www/yourapplication/path/中的某個位置。 它可能會有所幫助。