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*/
});

这将每行输出为：

{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 =年，y =值？

很抱歉，如果这是一个相当noobish的问题，但我是.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	2005 	2006 	2007 	2008 	2009 	2010 	2011 	2012 	2013 	2014 	2015 	2016 
B1GQ,CP_EUR_HAB,AL	2200 	2400 	2600 	3000 	3000 	3100 	3200 	3300 	3300 	3400 p	3600 p	: 
B1GQ,CP_EUR_HAB,AT	30800 	32200 	34000 	35100 	34300 	35200 	36800 	37600 	38000 	38700 	39400 	40000 
B1GQ,CP_EUR_HAB,BE	29700 	31000 	32500 	33100 	32300 	33500 	34500 	35100 	35300 	35900 	36600 	37400 
B1GQ,CP_EUR_HAB,BG	3100 	3600 	4300 	5000 	5000 	5200 	5600 	5700 	5800 	5900 p	6300 p	6600 p</pre>

PS：同样，TSV在值上有几个问题。

PPS：此答案仅向您展示如何过滤和准备数据阵列，仅限于此。

带有metrics-graphics.js的TSV文件

1 个答案: