javascript - 使用 d3 或 ajax 读取本地文件文本(制表符分隔值)会导致 Firefox 开发控制台出现语法错误

Question

阅读有效。然而，我在 Firefox 控制台中遇到了语法错误(当我读取 30 个文件时，这很烦人)。这些文件是注释文件，例如(时间\t 值)，没有标题，例如:

0.0   5.2
0.5   5.6
1.0   6.3
...

这是ajax代码:

function getdatafromfile(filename)  {
// Read annotation file. Example : %timeinstant \t %value \n
// Return an array of string
var arraydata
 $.ajax({
      type: "GET",
      url: filename,
      dataType: "text",
      async: false,
      success: function(csv) {arraydata = $.csv.toArrays(csv,{separator:'\t'}); }
      });


   return arraydata}

对于 d3:

d3.text(filename, function(text) {

        var data = d3.tsv.parseRows(text).map(function(row) {
            return row.map(function(value) {
                return +value;
                });
            });
        console.log(data);
    });
}

看来我可以使用其中一个代码，但是在这两种情况下(使用 firefox 33.1)我都遇到了语法错误。

Answer 1

文件阅读器可以像下面的代码一样工作。

在示例中，我添加了一个标志来使用变量的内容而不是文件。这仅用于演示，可以删除。此处的代码与jsFiddle相同。 .

也许您可以在 $.csv 方法之前或之后添加一些验证。所以您知道该文件是 csv/tsv 文件。

如果你需要在没有用户交互的情况下打开文件，你必须寻找不同的东西，因为JS不允许在没有用户选择文件的情况下打开文件(安全问题，请参阅此SO question) .

您可以将数据添加到数据库并从那里读取数据。例如Firebase 或 MongoDB 或使用 JSON 文件。我的另一个答案的代码应该适用于您在网页上托管的 JSON 文件。

var demoTxt = "0.0   5.2\
0.5   5.6\
1.0   6.3";

var flag_usedemofile = true; //if true var demoTxt will be used

function doOpen(evt) {
  var files = evt.target.files,
      reader = new FileReader();
    reader.onload = function() {
        if ( !flag_usedemofile) {
            var arraydata = $.csv.toArrays(this.result,{separator:'   '});
            showout.value = arraydata; //this.result;
        } else {
            var arraydata = $.csv.toArrays(demoTxt,{separator:'   '});
            showout.value = arraydata;
            console.log(arraydata);
        }
    };
    reader.readAsText(files[0]);
}
    
var openbtn = document.getElementById("openselect"),
    showout = document.getElementById("showresult");
openselect.addEventListener("change", doOpen, false);

#showresult {
  width:98%;
  height: 300px;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<input type="file" id="openselect" />
<textarea id="showresult"></textarea>