2017-01-18 4 views
1

私は別のソースからデータを取得しているので、d3.tsvを使用せずに以下のchartを実装しようとしています。D3.jsは配列を持つtsvファイルを置き換えます

この他の類似questionで述べたものの後に、私はこのコードの一部を置き換えてみました:で

d3.tsv("data.tsv", type, function(error, data) { 
    if (error) throw error; 

    var cities = data.columns.slice(1).map(function(id) { 
     return { 
      id: id, 
      values: data.map(function(d) { 
       alert(d.date); 
       alert(id); 
       return {date: d.date, temperature: d[id]}; 
      }) 
     }; 
    }); 

var data=[ 
{date:20111001,temperature:{New York:63.4,San Francisco:62.7,Austin:72.2}}, 
{date:20111001,temperature:{New York:58.0,San Francisco:59.9,Austin:67.7}} 
. 
. 
. 
]; 

しかし、私はエラーを取得する:

SyntaxError: missing : after property id 

この種類のグラフに適した形式は何ですか?

答えて

2

これは、TSVファイルの構造であるので:

date New York San Francisco Austin 
20111001 63.4 62.7 72.2 
20111002 58.0 59.9 67.7 
20111003 53.3 59.1 69.4 

はこの構造と(一緒に行機能付き)d3.tsv関数によってオブジェクトの配列に解析される。

[{ 
    "date": "2011-09-30T14:00:00.000Z", 
    "New York": 63.4, 
    "San Francisco": 62.7, 
    "Austin": 72.2 
}, { 
    "date": "2011-10-01T14:00:00.000Z", 
    "New York": 58, 
    "San Francisco": 59.9, 
    "Austin": 67.7 
}, { 
    "date": "2011-10-02T13:00:00.000Z", 
    "New York": 53.3, 
    "San Francisco": 59.1, 
    "Austin": 69.4 
},{ 
    ... 
}] 

どの変数dataの構造にする必要があります。

これに注意してください:ここの日付は既に解析済みです。元の値を使用する場合は、data配列の日付を解析します(たとえば、forEachを使用)。

PS:あなたのアレイでは、New YorkSan Franciscoが有効なプロパティ名ではありません。カンマを使用する必要があります。

var data = [{ 
    date: 20111001, 
    temperature: { 
     "New York": 63.4, 
     "San Francisco": 62.7, 
     Austin: 72.2 
    } 
}, { 
    date: 20111001, 
    temperature: { 
     "New York": 58.0, 
     "San Francisco": 59.9, 
     Austin: 67.7 
    } 
}]; 
関連する問題