棒グラフを作成するD3

Question

皆さん、私はD3.JSを使い始めています。私は場所の温度で棒を見せたいと思います。

これは私がJSONから自分のデータを取る私のコード

json_url= "https://data.cityofchicago.org/resource/7edu-s3u7.json"; 
var all_name_station = ["63rd Street Weather Station", "Foster Weather Station", "Oak Street Weather Station"]; 
var one_name_station = ["63rd Street Weather Station"]; 

var width = 900; 
var height = 400; 

$(document).ready(function(){ 
    d3.json(json_url, function(data) { 
    var canvas = d3.select("body") 
     .append("svg") 
     .attr("width", width) 
     .attr("height", height); 


    one_name_station.forEach(function(station_item){ 
       data.forEach(function(item_data){ 
      if (item_data["station_name"] == station_item){ 
       //console.log(item_data); 
      canvas.selectAll("rect") 
        .data(item_data) 
       .enter() 
        .append("rect") 
        .attr("width", function(d) {return d.air_temperature;}) 
        .attr("height", 50) 
        .attr("y", function(d,i){return d;}) 
        .attr("fill", "blue"); 
      } 
     }); 
    }); 
    }); 
}); 

あり、そこに多くの駅がありますが、私は唯一の"63rd Street Weather Station"

ためのデータしかし、私の問題をrepresente起動このコードは返さないということです何もない。試すことができますhere

私は何が欠けている！事前に

おかげ

Answer 1

は、あなたの当面の問題は、今、あなただけのオブジェクト、dataに反復可能に合格していないということです。あなたは配列にitem_dataをラップした場合、それは単一の青色の長方形を作成します：

.data([item_data]) 

を次に、あなたは、このようなyを設定すると、しかし、他の問題が発生します。一度に1つずつ追加するのではなく、最初にオブジェクトのリストにデータを再フォーマットし、one of the canonical bar chart examplesをビルドすることをお勧めします。

Answer 2

私は1つのアイテムではなく、データの配列を渡します。だから、最初に適切なステーションの配列をコンパイルして、D3に渡し：

//array of objects 
var stations = [{name: "Station 1", air_temperature: 19.5}, 
          {name: "Station 2", air_temperature: 21.5}, 
          {name: "Station 3", air_temperature: 20},]; 
//adding bars 
var bars = canvas.selectAll("rect") 
       .data(stations) 
       .enter() 
        .append("rect") 
        .attr("width", function(d) {return d}) //guess: pass through function figuring out the right scale 
        .attr("height", 50) //guess: pass through function figuring out the right scale 
        .attr("y", function(d,i){return d.air_temperature;}) //guess: multiply by scaleFactor, obtained depending on number of entries in data and canvas size 
        .attr("fill", "blue"); //guess: pass through d3.scale.linear() function