d3.js JSONのサブアレイをグラフ表示

Question

私は単純な折れ線グラフを描こうとしています。配列へのパスはかなり長いですが、forEach関数が配列をループしていないようですね？私は正常に 'null'と出てくるd.airと 'NaN'として出てくるd.dateを作成する関数がないのですか？

データ[0] .STATION [0] .OBSERVATIONS.date_time、およびデータ[0] .STATION [0]それはblockbuilder上で、私はここで

をプロットしたい配列は.OBSERVATIONS.air_temp_set_1です： http://blockbuilder.org/TMoore24/b9906fd3893034b91f13e0c86acb2f75

多くの感謝！

Answer 1

ここでは2つのことが起こっています。

（1）：

data.forEach(function(d) { 
    d.date = format(data[0].STATION[0].OBSERVATIONS.date_time); 
    d.air = +data[0].STATION[0].OBSERVATIONS.air_temp_set_1; 
}); 

data[0].STATION[0].OBSERVATIONS.date_time、及びdata[0].STATION[0].OBSERVATIONS.air_temp_set_1両方が配列されているので、これらは動作しません。

おそらくこれはこれです。

var obs = data[0].STATION[0].OBSERVATIONS; 
var dates = obs.date_time.map(format); 
var air = obs.air_temp_set_1.map(function(d){ return +d; }); 

data.date = dates; 
data.air = air; 

これは、日付の配列と空気温度の配列です。

残念ながら、これは＃2の問題につながります。

（2）

var line = d3.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.air); }); 

この関数は、各オブジェクト、dは、フォーム{date: SINGLE_DATE_VALUE, air: SINGLE_NUMERIC_VALUE, etc}を取るが、あなたが実際に持っていることは上記line機能を使用するにはdata = {date:[ARRAY_OF_DATES, air: ARRAY_OF_TEMPERATURES, etc...}

であることを前提として、あなたは作成する必要があります形式：{date: DATE_VALUE, air: AIR_TEMPERATURE_VALUE}のオブジェクトの配列最終的なデータをどのように構造化するかによって、さまざまな方法があります。これは理にかなって

data.airTempByDate = data.date.map(function(d, i){ 
    return { 
     date: d, 
     air: air[i] 
    }; 
}); 

---

希望：ここでは一つの方法です！ Here's a working block on blockbuilderに上記の修正を加えました。