使用 D3.JS 时无法加载 TSV答案

【问题标题】：Can't load TSV when using D3.JS使用 D3.JS 时无法加载 TSV
【发布时间】：2014-06-11 14:12:57
【问题描述】：

我需要在斜率图中可视化包含国家、日期和百分比的 TSV 文件。除此之外，我需要使用 CSV 文件进行另一项作业，坦率地说，该文件加载没有任何问题，但我已经坚持这个文件超过 1.5 天，我就是想不通。

我编写了一个基本代码，只是为了测试是否可以显示 TSV 文件中的一些文本。此外，在 chrome 浏览器中检查元素时，我看不到 SVG 容器。我真的很感激在这个问题上的一些帮助！

    var container = d3.select("body").append("svg")
                .attr("width", 500)
                .attr("height", 500);

d3.tsv("18-year-olds-in-education.tsv", function(error, data) {
    data.forEach(function(d) {
        d.indic_ed,geo\time = d.indic_ed,geo\time;
        d.2001 = +d.2001
        d.2012 = +d.2012;
});


var text = container.selectAll("text")
                .data(data)
                .enter()
                .append("text");

var textLabels = text
     .attr("x", 200)
             .attr("y", 200)
             .text(function(d) { return d.2012)
             .attr("font-family", "sans-serif")
             .attr("font-size", "20px")
             .attr("fill", "red");

});

【问题讨论】：

您是否收到任何错误消息？
Uncaught SyntaxError: Unexpected token ILLEGAL on the line which includes this code: d.indic_ed,geo\time = d.indic_ed,geo\time;。当我删除 data.forEach 函数（这是我在这个问题之前的旧代码）并在浏览器中运行它时，我收到此错误：“Uncaught SyntaxError: Unexpected number”在包含代码的行上：.text(function( d) { 返回 d.2012)
啊，您需要像这样引用该字段：d["indic_ed,geo\time"]。不过，我建议将其重命名为更合理的名称。
我将 ["indic_ed,geo\time"] 更改为国家/地区。该行现在包括 d.country = d.country。直到现在我才在下一行收到此错误：意外号码。我在 tsv 文件中将 2012 更改为 12，将 2001 更改为 1。现在它消失了。非常感谢您的时间！只是出于好奇的一个问题是为什么我不能使用这些数字而必须将它们变成字符串？
哦，是的，那是另一回事 :) 这根本不是有效的 Javascript。不过，您可以使用 d["2001"] 而不是 d.2001。

标签： javascript csv d3.js

【解决方案1】：

问题在于您在 TSV 中使用的字段名称。特别是，以下代码不是有效的 Javascript：

d.indic_ed,geo\time = d.indic_ed,geo\time;
d.2001 = +d.2001;
d.2012 = +d.2012;

您可以使用替代语法来访问字段：

d['2001'] = +d['2001'];
d['2012'] = +d['2012'];

我在这里省略了第一条语句，因为它没有任何作用。

【讨论】：