使用绝对路径在 d3.js 中加载 csv 文件

Question

I am able to load a csv file if it is in the same working directory for example:

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

but if the file is in another directory and I pass the absolute path the file isn't loaded:

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

I get code 404, message File not found

I am already running a local web server

EDIT

I am following this tutorial:

https://www.d3-graph-gallery.com/graph/choropleth_basic.html this is index.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>

Which is working if the file data.csv is the same directory of index.html, but it isn't working if it is in another directory and I get:

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

EDIT 2

Trying to directly loading a csv file without download it before in this way, but not working:

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

Few things here:

1. Ensure that your data.csv and dat.csv nomenclature is not an issue.

2. Are you trying to access directories not in scope of permission for the localhost? You need to allow www-data to have access to the path. It seems you are trying to access /home/path/ which most probably is not under scope of www-data's access. Or simply try placing data.csv somewhere within the /var/www/yourapplication/path/ . It may help.