TSV文件

Question

我试图从this显示数据图表.tsv文件：

d3.tsv('GDP.tsv', function(data) { 
for (var i = 0; i < data.length; i++) { 
    console.log(data[i]); 
} 
MG.data_graphic({ 
    title: "Line Chart", 
    description: "This is a simple line chart. You can remove the area portion by adding area: false to the arguments list.", 
    data: data,   /*This is very probably part of the issue*/ 
    width: 240, 
    height: 128, 
    target: document.getElementById('graph-gdp'), 
    x_accessor: 'value', /*This is very probably part of the issue*/ 
    y_accessor: 'time' /*This is very probably part of the issue*/ 
}); 

这outputing每一行视为：

{na_item,unit,geo\time: "B1GQ,CP_MEUR,AL", 
2005 : "6475.3 ", 
2006 : "7090.8 ", 
2007 : "7809.8 ", 
2008 : "8800.3 ", 
2009 : "8662.2 ", 
2010 : "8996.6 ", 
2011 : "9268.3 ", 
2012 : "9585.8 ", 
2013 : "9625.4 "(etc...)} 

将如何我确实显示一行，所以选择它的名称（例如“B1GQ，CP_MEUR，AL”），并在图形上显示该数据，其中x = year和y = value？

对不起，如果这是一个相当不好的问题，但我是通用的.js，.tsv文件和Web开发的新手。我已经尝试了一下自己的想法，但一直在失败。

Answer 1

一旦加载使用d3.tsv该TSV中，第一步骤是过滤所述数据阵列，只得到该行选择了：

var filtered = data.filter(d => d["na_item,unit,geo\\time"] == "B1GQ,CP_EUR_HAB,AL"); 
//escaping the backslash here ---------------------^ 

然而，由于TSV具有奇怪标题（和值以及.. ），记得要避开反斜线。

那filtered数组只有一个对象，你不会太离谱。因此，下一步骤是将其转换在几个对象的数组，一个用于每个数据点，使用d3.entries：

var selectedData = d3.entries(filtered[0]).filter(d => d.key != ["na_item,unit,geo\\time"]) 

随着该数组，也可以创建图表。

这里是一个演示代码，数组打印在控制台中（“key”是年份，您将在x轴中使用，“value”是值，您将使用在y轴）：

data = d3.tsvParse(d3.select("#tsv").text()); 
 
var filtered = data.filter(d => d["na_item,unit,geo\\time"] == "B1GQ,CP_EUR_HAB,AL"); 
 
var selectedData = d3.entries(filtered[0]).filter(d => d.key != ["na_item,unit,geo\\time"]) 
 
console.log(selectedData);

pre { 
 
    display: none; 
 
}

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<pre id="tsv">na_item,unit,geo\time \t 2005 \t 2006 \t 2007 \t 2008 \t 2009 \t 2010 \t 2011 \t 2012 \t 2013 \t 2014 \t 2015 \t 2016 
 
B1GQ,CP_EUR_HAB,AL \t 2200 \t 2400 \t 2600 \t 3000 \t 3000 \t 3100 \t 3200 \t 3300 \t 3300 \t 3400 p \t 3600 p \t : 
 
B1GQ,CP_EUR_HAB,AT \t 30800 \t 32200 \t 34000 \t 35100 \t 34300 \t 35200 \t 36800 \t 37600 \t 38000 \t 38700 \t 39400 \t 40000 
 
B1GQ,CP_EUR_HAB,BE \t 29700 \t 31000 \t 32500 \t 33100 \t 32300 \t 33500 \t 34500 \t 35100 \t 35300 \t 35900 \t 36600 \t 37400 
 
B1GQ,CP_EUR_HAB,BG \t 3100 \t 3600 \t 4300 \t 5000 \t 5000 \t 5200 \t 5600 \t 5700 \t 5800 \t 5900 p \t 6300 p \t 6600 p</pre>

PS：再次，TSV具有几个问题的值。

PPS：此答案仅向您显示如何筛选和准备您的数据阵列，并且仅限于此。