检查 D3 中潜在的 CSV 文件问题

Question

我有一个 D3 项目，它使用非常大的 CSV 文件来读取数据。它工作正常，除了有时用户会因为以下问题之一而无限期地看到旋转的加载图像。
我需要能够捕获这些问题并向用户显示一些有意义的消息而不是 never-ending 等待消息：

当数据文件(MyData.csv)不存在时
当 MyData.csv 存在但为空时
当MyData.csv存在时，不为空但格式不正确（更改第一行header列的名称以进行测试）。

理想情况下，我希望能够区分它们。

function loadData() {
    d3.csv('MyMap.csv', function(data) {
        data.forEach(function(d) {
            doSomething()
        });

        // load primary data set
        d3.csv('MyData.csv', function (data) {
            doSomethingWithData(data);
        }); // main data set
    });
};

更新了错误检查

var ErrorEnum = Object.freeze({NOTFOUND: 1, EMPTY: 2, INVALIDFORMAT: 3});
var mapFileName = 'MyMap_empty.csv';
var dataFileName = 'MyData_empty.csv';

function redirectOnFileError(fileName, url, errID) {
    var errTitle = errID == ErrorEnum.NOTFOUND ? "File Not Found" : (errID == ErrorEnum.EMPTY ? "Empty File" : "Invalid File Format");
    var errText = fileName + (errID == ErrorEnum.NOTFOUND ? " could not be found" : (errID == ErrorEnum.EMPTY ? " is empty" : " has invalid format"));
    console.log(errText);

    swal({
        title: errTitle,
        text: errText,
        type: "error",
        confirmButtonText: "OK"
        },
        function(isConfirm){
            // somehow we never get here!
            console.log("here ...");
            if (isConfirm) {
                    window.location.href = url;
            }
        }); 
        // hack ... callback function above is not executed, so using below jQuery to use "OK" button's class and 'click' it
        $('.swal2-confirm').click(function(){
            window.location.href = url;
    });
}

function loadData() {
    d3.csv(mapFileName, function (error, data) {
        if (error && error.status === 404) {
            redirectOnFileError(mapFileName, "fnf.html", ErrorEnum.NOTFOUND);
        }
        else if (data.length === 0) {
            redirectOnFileError(mapFileName, "ef.html", ErrorEnum.EMPTY);
        }
        else {
            data.forEach(function (d) {
                // DoSomethingHere();
            });

        // load primary data set
        d3.csv(dataFileName, function (error, data) {
            if (error && error.status === 404) {
                redirectOnFileError(dataFileName, "fnf.html", ErrorEnum.NOTFOUND);
            }
            else if (data.length === 0) {
                redirectOnFileError(dataFileName, "ef.html", ErrorEnum.EMPTY);              }
            else {
                // DomSomethingWithData();
            }); // main data set
    });
}
}
};

Answer 1

第一种和第二种情况都可以在这里得到解答（第三种情况见下文PS）。

在我们开始之前，让我们看一下现有的工作 CSV 文件：

 d3.csv("https://gist.githubusercontent.com/GerardoFurtado/2e9f269f7a0f56cf7e23b480afcf280a/raw/5e361753a695534915e81786013976aa94685695/csvfile.csv", function(error, data) {
  console.log(data)
});

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

如您所见，一切正常。这是我将在接下来的代码片段中使用的 CSV。

第一个场景

你的第一个场景...

When the data file (MyData.csv) doesn’t exist

...可以使用d3.csv函数中的第一个参数来处理，也就是错误（如果有的话）：

d3.csv(url, function(error,data){...
//error here ----------^

在下面的代码片段中，我们正在检查错误中的 target.status。它会给你一个 404，打印在控制台上。我只是更改之前 CSV 文件的 url：

d3.csv("https://gist.githubusercontent.com/GerardoFurtado/2e9f269f7a0f56cf7e23b480afcf280a/raw/fakeurl.csv", function(error, data) {
  if (error && error.target.status === 404) {
      console.log("File not found")
    }
});

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

第二种情况

你的第二种情况...

When the MyData.csv exists but is empty

...可以固定检查数据的长度。这是一个演示，使用我的第一个 CSV 的修改版本（没有行）：

d3.csv("https://gist.githubusercontent.com/GerardoFurtado/2e9f269f7a0f56cf7e23b480afcf280a/raw/5e361753a695534915e81786013976aa94685695/csvfileempty.csv", function(error, data) {
  if (error && error.target.status === 404) {
      console.log("File not found")
    }
  if(data.length === 0){
  console.log("File empty")
  }
});

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

PS：你的第三种情况（"file is improperly formatted"）只能靠你解决：你是唯一知道文件结构的人.

检查 D3 中潜在的 CSV 文件问题

Check for potential CSV file issue in D3

javascript

file-exists

d3.js

crossfilter

第一个场景

第二种情况