Javascript 带有metrics-graphics.js的TSV文件

我正在尝试显示包含.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*/
});

我该如何显示一行，以其名称（例如“B1GQ、CP_MEUR、AL”）选中，并在图形上显示该数据，x=年份，y=值

---

很抱歉，如果这是一个非常不礼貌的问题，但我对.js、.tsv文件和web开发一般都是新手。我自己也尝试过解决这个问题，但一直失败得很惨。

一旦您使用

d3.TSV

加载该TSV，第一步就是过滤数据数组，只获取您选择的行：

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

但是，由于TSV有奇怪的标题（以及值…），请记住避开反斜杠

过滤后的

数组只有一个对象，您不会离它太远。因此，下一步是使用
d3将其转换为多个对象的数组，每个对象对应一个数据点

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[“不适用项目、单位、地理位置\\time”]==“B1GQ、CP\u EUR\u HAB、AL”）；
var selectedData=d3.entries（筛选[0]）.filter（d=>d.key！=[“不适用项目、单位、地理位置\\时间]）
console.log（选择数据）
pre{
显示：无；
}

纳乌项目，单位，地理时间2005年2007年2008年2010年2012年2013年2015年
B1GQ，加利福尼亚州东南部，邮编2200 2400 2600 3000 3100 3200 3300 3300 3400 3600 p：
电话：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 5200 5600 5700 5800 5900 p 6300 p 6600 p
使用
d3.TSV
加载该TSV后，第一步是过滤数据数组，仅获取您选择的行：

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

但是，由于TSV有奇怪的标题（以及值…），请记住避开反斜杠

过滤后的
数组只有一个对象，您不会离它太远。因此，下一步是使用
d3将其转换为多个对象的数组，每个对象对应一个数据点

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[“不适用项目、单位、地理位置\\time”]==“B1GQ、CP\u EUR\u HAB、AL”）；
var selectedData=d3.entries（筛选[0]）.filter（d=>d.key！=[“不适用项目、单位、地理位置\\时间]）
console.log（选择数据）
pre{
显示：无；
}

纳乌项目，单位，地理时间2005年2007年2008年2010年2012年2013年2015年
B1GQ，加利福尼亚州东南部，邮编2200 2400 2600 3000 3100 3200 3300 3300 3400 3600 p：
电话：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 5200 5600 5700 5800 5900 p 6300 p 6600 p
谢谢！例如，如果键是2005Q1、2005Q2、2005Q3，我会怎么做？您提供的代码中有什么要求密钥是数字？现在，什么都没有。您必须创建一个函数来将这些奇怪的字符串转换为数字。也许，最好的方法是使用正则表达式。我建议你再发一个关于这个的问题。谢谢！例如，如果键是2005Q1、2005Q2、2005Q3，我会怎么做？您提供的代码中有什么要求密钥是数字？现在，什么都没有。您必须创建一个函数来将这些奇怪的字符串转换为数字。也许，最好的方法是使用正则表达式。我建议你发布另一个关于这个的问题。