Question

我需要将.csv文件中特定列的所有值写入数组。请执行以下工作示例并注意，列Address中的所有值都已成功写入数组变量tmpArr

＆＃13;

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

＆＃13;

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

＆＃13;

但是如何将完整的.csv文件直接加载到变量csvString？

我通过ajax成功加载了.csv文件，但我只获得了输出,,,

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;
        })
    );
}

我得到ReferenceError: d is not defined。

如何成功加载.csv文件？

Answer 1

没有必要混合使用jQuery，因为D3提供了方便地加载和解析CSV文件的方法。

在D3的旧版本3或4中，您可以使用d3.csv()，它是现已弃用的d3-request模块的一部分。这将使用Ajax请求来加载文件的内容：

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

但是，如果您决定升级到v5，则事情略有changed，因为d3.csv()尽管具有相同的名称，但现在是d3-fetch模块的一部分，并将返回Promise而不是执行回调。然后你的代码变成：

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

如果你不介意使用jQuery库，这里可能是你问题的答案： How to read data From *.CSV file using javascript?

否则，一个人在答案之上添加了他自己的“快速而肮脏”的功能。

希望有所帮助。

/祝你好运和快乐的编码

Answer 3

您现在应该迁移到d3 V4 / V5。在V4中，它如下所示。

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
});

在V5中，它就像

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

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

3 个答案: