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ファイル、ウェブ開発の方が一般的です。私はこれを自分で考えてみましたが、哀れなことに失敗しました。もしd3.tsvを使用してそのTSVをロードしたら

Answer 1

、最初のステップは、選択しただけで行を取得し、データアレイをフィルタリングされた：

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

しかし、そのTSVは同様に奇妙ヘッダ（および値を有しているので.. ）、バックスラッシュを逃れてください。

そのfiltered配列にはオブジェクトが1つしかありません。あなたはあまり離れていません。したがって、次のステップはd3.entries使用して、いくつかのオブジェクトの配列、各データポイントの一つに、それを変換します

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

をその配列では、あなたのグラフを作成することができます。

ここではデモコードがあり、配列はコンソールに表示されます（「キー」はx軸で使用する年、「値」は使用する値です） ）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：この回答は、データアレイをフィルタリングして準備する方法と、それだけを示しています。