создать гистограмму с D3

Question

Приветствую всех, я начинаю с D3.JS, и я хочу показать бар с температурой места.

Это мой код

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"); 
      } 
     }); 
    }); 
    }); 
}); 

Я принимаю мои данные из JSON, есть много станции, но я начинаю только represente данные для "63rd Street Weather Station"

Но мои проблемы в том, что этот код не возвращаются ничего. Вы можете попробовать here

Что я пропущу!

Заранее спасибо

Answer 1

Вашей насущной проблемы является то, что сейчас вы не проходя итератор к data, просто объекту. Если вы заключаете item_data в массиве он будет создан один синий прямоугольник:

.data([item_data]) 

Тогда вы будете иметь другие проблемы, однако, такие как установка y. Я бы рекомендовал сначала переформатировать ваши данные в список объектов (вместо добавления их по одному) и построить one of the canonical bar chart examples.

Answer 2

Я бы передал массив данных, а не один элемент. Итак, сначала скомпилируйте массив правильных станций, а затем передайте их на 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