Question

我正在创建一个数据仪表板，允许用户指向其文件系统上的CSV文件，然后将其上传到仪表板中以对其执行各种可视化操作。

我正在使用一个很好的d3js示例进行可视化，但我找到的所有示例都没有包括读取CSV文件而我无法使其工作。我可以读取CSV文件并将内容记录到控制台，但无论我将数据传递到数组（我随后可以将其用作可视化的基本数据），我的数组根本无法用作JS甚至是d3js变量。

以下是我正在使用的文件的一部分 - 提供在各个欧盟国家/地区使用的汽车数量。

Country;Car;Van;Truck;Total
Austria;4748048;375163;78539;5201750
Belgium;5587415;678801;159623;6425839
Croatia;1489338;127395;45757;1662490

由于分隔符是分号，我使用dsv函数，以便我可以显式设置分隔符。

function getCSVdata( ) {
    var myData = [];
    d3.dsv(";","EU-cars.csv", function(d) {
        return {
            State : d.Country,
            freq: { 
                low  : d.Car,
                med  : d.Van,
                high : d.Truck
            }
        };
    }).then( function(d) {
        myData.push( d );
        console.log( d );
    }); 
    return myData;
}

将返回值分配给名为＆＃39; freqData＆＃39;的变量。（这里只是使用现有的示例代码来尝试并本地化问题 - 如果我在JS中声明对象而不是从CSV文件中读取它，则使用的代码将工作文件。）

编写＆＃39; freqData＆＃39;对象到我的控制台显示它是一个包含1个元素的数组。写作＆＃39; freqData [0]＆＃39;到控制台显示一个包含所有预期26条记录的数组。但是试着写“freqData [0] .length＆＃39;给出错误，因为它是未定义的。尝试使用警报会导致错误。

对于那些拥有大量d3j和其他JS经验的人来说，这可能是一件简单的事情，但事实证明这对于新手而言过于复杂。

我需要使用最新的（v5）d3js，它使用的Promise对象对我来说是全新的。通过阅读各种所谓的已知方法的大量部分信息，我无法弄明白。如果有人可以发布一个完整的工作示例来读取CSV并将数据传递给一个非常棒的JS对象。我的时间不多了。

由于

4everJang

Answer 1

运行代码时，您应该看到确实正在加载数据。当我在dsv / csv文件中使用您的示例数据并运行您的函数时，我将以下内容记录到控制台：

因此，根据then方法中的控制台日志显示，您的dsv文件加载成功，行功能成功。

让我们仔细看看.then方法，它在文件加载并应用了行函数后运行 - 或者，一旦履行了承诺。所以这里的关键部分是then方法在完成promise之后才执行提供的函数。当我们等待承诺完成时，代码继续执行，在您的情况下，返回语句在数据完全加载之前执行 - ，因此在then方法执行之前。这意味着您没有返回任何数据，这是您的问题。

使用行函数获取数据的最简单且最常见的d3模式是在.then方法的履行函数中放置需要加载数据的代码：

function getCSVdata( ) {
    d3.dsv(";","https://raw.githubusercontent.com/Andrew-Reid/SO/master/dsv.csv", function(d) {
        return {
            State : d.Country,
            freq: { 
                low  : d.Car,
                med  : d.Van,
                high : d.Truck
            }
        };
    }).then(function(data) {
      console.log("file has " + data.length + " rows");
      logger(data);
    }); 
}

getCSVdata();

function logger(data) {
	console.log(data);
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

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

或者您可以采用略有不同的形式：

function getCSVdata( ) {
    d3.dsv(";","https://raw.githubusercontent.com/Andrew-Reid/SO/master/dsv.csv", function(d) {
        return {
            State : d.Country,
            freq: { 
                low  : d.Car,
                med  : d.Van,
                high : d.Truck
            }
        };
    }).then(fulfilled); 
}

getCSVdata();

function fulfilled(data) {
	// do stuff here:
    console.log(data);
}

.as-console-wrapper { max-height: 100% !important; top: 0; }

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

如何使用d3js v5将{CSV}文件读入数组

1 个答案: