D3 -

2016-10-30 7 views
1

おはよう配列にCSVデータのバインド、簡単な質問になるだろうと私は理解しようとしている時間遊んでてきたものの、間違いなく被写体に理解の私の完全な欠如が表示されます何のためD3 -

謝罪これは明らかに私はかなり基本的なものを見逃しています。

d3.csv("data.csv", function(data) { 
console.log(data); 
}); 

それは4列のデータの28行を、含まれています

は、私が正常にロードされているCSVファイルを持っています。

私は私が本当に...上記のコードの作品は...列に依存して、3つの別々の配列に「バインド」のデータをに

var Array1 = [], 
     Array2 = [], 
     Array3 = [] 

    for (var i = 0; i < data.length; i++) { 
     Array1.push([ i, 10]); 
     Array2.push([ i, 20]); 
     Array3.push([ i, 30]); 
    } 

をしようとしていますが、データセットにリンクされていない

キャップはCSVファイルのデータマーク場合について示されたい:

var Array1= [], 
     Array2 = [], 
     Array3 = [] 

    for (var i = 0; i < data.length; i++) { 
     Array1.push([ FIRSTCOLUMN, SECONDCOLUMN]); 
     Array2.push([ FIRSTCOLUMN, THIRDCOLUMN]); 
     Array3.push([ FIRSTCOLUMN, FOURTHCOLUMN]); 
    } 

申し訳ありませんが、私はこれは本当に愚かな質問で実現...おそらく記事へのリンクだけは本当に何が必要でしょう説明します助けて?

ありがとう:)

答えて

0

まず、あなたは何をあなたの質問を持っていることは単純な配列が、配列の配列ではないので、もっと自分の希望する結果を説明する必要があります。オブジェクトの配列が必要な場合は、各オブジェクトの列1の値と他の列の値が必要です。質問を更新してください。

データに基づいて単純な配列を作成する場合は、mapを使用できます。

firstColumn,secondColumn,thirdColumn,fourthColumn 
12,3,44,35 
15,32,17,42 
//... 

は、例えば、第二のカラムの値を持つ配列を構築するために、書き込み:

だから、これはあなたのCSVであると仮定し、あなたのコールバック(function(data){...)インサイド

var myArray = data.map(function(d){ 
    return d.secondColumn; 
}); 

EDIT:コメントに基づいて、これはあなたが望むものである:あなたのデータの配列を指定して

は、あなたは、インデックスとキーで対応する列を選択することで、各オブジェクトにアクセスする必要があります。したがって、最初の列の値にアクセスするには、

for(var i = 0; i < 100; i++){ 
    newArray.push([i, myData[i].firstColumn]) 
}; 

他の列についても同じ操作を行います。これは、作業のデモです:

var myData = [{firstColumn: 4, secondColumn: 12, thirdColumn: 21, forthColumn: 11}, 
 
{firstColumn: 41, secondColumn: 22, thirdColumn: 71, forthColumn: 10}, 
 
{firstColumn: 10, secondColumn: 16, thirdColumn: 2, forthColumn: 15}, 
 
{firstColumn: 6, secondColumn: 32, thirdColumn: 7, forthColumn: 17}, 
 
{firstColumn: 33, secondColumn: 12, thirdColumn: 29, forthColumn: 19}]; 
 

 
var newArray = []; 
 

 
for(var i = 0; i < 5; i++){ 
 
newArray.push([i, myData[i].firstColumn]) 
 
}; 
 

 
console.log(newArray)

+0

はあなたの応答私の友人をありがとうございました。私は実際には、次の場所で本当にクールな折れ線グラフのコードを変更しようとしています:http://bl.ocks.org/bobmonteverde/2070069 ...コードの一番下のセクションはデータを入力しますが、現在はランダム数字。私は単に自分のデータでこれを置き換えようとしています。私は実際には簡単なことだと確信していますが、私はJavascriptやD3を使ったことがないので、深いところを飛び回っています。net –

+0

@AdrianGreenwood編集を確認します。 –

+0

すごい、ありがとう、私は今それを働かせてくれてありがとう。それは実際に私に非常に混乱を引き起こしていた列名を参照する単純な部分でした(myData [i] .firstColumn) - 私は特定の列にデータを参照する方法を知っていました - その1つの部分をどうやって行うかを調べる。私はあなたの助けから多くを学んだ –