具有指标的 TSV 文件-graphics.js

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=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 有奇怪的 headers（以及值......），请记住转义反斜杠。

那个 filtered 数组只有一个 object，你不会离它太远。因此，下一步是将其转换为几个 object 的数组，每个数据点一个，使用 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：这个答案只告诉你如何过滤和准备你的数据数组，而且仅此而已。

具有指标的 TSV 文件-graphics.js

TSV file with metrics-graphics.js

javascript

csv

d3.js

metricsgraphicsjs