如何将 csv 文件加载到变量中以与 d3.js 一起使用

Question

I need to write all values from a specific column in a .csv file to an array. Please execute the following working example and notice, that all the values from the column Address are successfully written into the array variable tmpArr

 var csvString= "Address,longitude,latitude,geometry\\n"+ "1,2,3,4\\n5,6,7,8\\n2,3,4,5\\n6,7,8,9"; var t = d3.csv.parse(csvString); var tmpArr = t.map(function(d){return d.Address;}); console.log(tmpArr);

 <script src="https://d3js.org/d3.v3.min.js"></script>

But how can I load a .csv file into the variable csvString instead of a hardcoded string?

I successfully load the .csv file via ajax, but I only get the output ,,,

csvToChart("daten/kundenimporte/", "test.csv");

function csvToChart(basepath, filename)
{
    $.ajax({
        url: basepath + filename,
        method: "GET",
        success: myCallback
    });
}

function myCallback(response)
{
    var t = d3.csv.parse(response);
    d3.select("#output").html(
        t.map(function(d){
            return d.Kundengruppe;
        })
    );
}

I get ReferenceError: d is not defined .

How can I successfully load my .csv file?

Answer 1

There is no need to mix in jQuery as D3 provides methods for conveniently loading and parsing CSV files.

In the old versions 3 or 4 of D3 you could use d3.csv() which was part of the now deprecated d3-request module. This will employ an Ajax request for loading the file's content:

d3.csv("daten/kundenimporte/test.csv", function(data) {
  d3.select("#output").html(
    data.map(function(d){
      return d.Address;
    })
  );
});

If you decide on upgrading to v5, however, things have slightly changed , since d3.csv() despite having the same name is now part of the d3-fetch module and will return a Promise instead of executing a callback. Your code then becomes:

d3.csv("daten/kundenimporte/test.csv")
  .then(function(data) {   // Handle the resolved Promise
    d3.select("#output").html(
      data.map(function(d){
        return d.Address;
      })
    );
  });

Answer 2

If you dont mind using a jQuery library, here might be an answer for you problem: How to read data From *.CSV file using javascript?

Otherwise a person added his own "quick and dirty" function above ^that answer.

Hope that helps.

/Good luck and happy coding

Answer 3

You should now migrate to d3 V4/V5. In V4, it goes like below.

d3.csv("your_path_to_csv file", function(data) {
//Your code goes here

//Now you can use 'data' variable as an array of objects
console.log
});

In V5, It goes like

d3.csv("your_path_to_csv file").then(function(data) {
//Your code
});