1

我正在尝试使用此.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=year 和 y=value？

抱歉，如果这是一个相当愚蠢的问题，但我对 .js、.tsv 文件和一般的 Web 开发是新手。我试过自己解决这个问题，但失败了。

4

1 回答 1

0

使用 加载 TSVd3.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：此答案仅向您展示如何过滤和准备数据数组，仅此而已。

于 2017-03-18T16:26:59.527 回答