2016-09-05 4 views
0

Я пытаюсь сделать график гистограммы, показывающий общее количество бега в час.Гистограмма с ошибкой шкалы времени в D3

Поля: Данные, Horario; Endereço; Nº; Байрро; Cruzamento; Referencia; Região; Classificação; Sexo; Idade; Gravidade дас Lesões; Morte

я должен получить данные из Horario полях» '(означает время) и' Morte '(мертвые).

Но код приносит мне эту ошибку: Неожиданное значение переводит (0, NaN) атрибут преобразования синтаксического анализа. ... uments); нуль == е this.removeAttribute (т): this.setAttribute (т, е)}} функция Я (т, п) ...

Вот код:

?
d3.csv("atropelamentos.csv", function(error,data){ 

    var parseDate = d3.timeParse('%H:%M'); 

    data.forEach(function(d) { 
     d.hora = parseDate(d['Horário']); 
     d.mortos = +(d['Morte']); 
    }); 

    var formatCount = d3.format(",.0f"); 

    var margin = {top: 10, right: 30, bottom: 30, left: 30}, 
     width = 960 - margin.left - margin.right, 
     height = 350 - margin.top - margin.bottom; 

    var x = d3.scaleTime() 
     .range([0, width]); 

    var histogram = d3.histogram() 
    .domain(x.domain()) 
    .thresholds(x.ticks(24)) 
    .value(function(d) { 
     return d.hora 
    }) 

    var bins = histogram(data); 

    var y = d3.scaleLinear() 
     .domain([0, d3.max(bins, function(d) { return d.mortos; })]) 
     .range([height, 0]); 

    var svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

    var bar = svg.selectAll(".bar") 
     .data(bins) 
    .enter().append("g") 
     .attr("class", "bar") 
     .attr("transform", function(d) { return "translate(" + x(d.x0) + "," + y(d.length) + ")"; }); 

    bar.append("rect") 
     .attr("x", 1) 
     .attr("width", x(bins[0].x1) - x(bins[0].x0) - 1) 
     .attr("height", function(d) { return height - y(d.length); }); 

    bar.append("text") 
     .attr("dy", ".75em") 
     .attr("y", 6) 
     .attr("x", (x(bins[0].x1) - x(bins[0].x0))/2) 
     .attr("text-anchor", "middle") 
     .text(function(d) { return formatCount(d.length); }); 

    svg.append("g") 
     .attr("class", "axis axis--x") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

}); 

Некоторые Teste данные:

data = [ 
    { 
    "Data": "01/01/11", 
    "Horário": "16:15", 
    "Endereço": "Rua Elisabeth Saydel Fogaça", 
    "Nº": 312, 
    "Bairro": "Jd Piazza Di Roma II", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Oeste", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 18, 
    "Gravidade das Lesões": "Fer. Indet.", 
    "Morte": 0 
    }, 
    { 
    "Data": "01/01/11", 
    "Horário": "16:15", 
    "Endereço": "Rua Elisabeth Saydel Fogaça", 
    "Nº": 312, 
    "Bairro": "Jd Piazza Di Roma II", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Oeste", 
    "Classificação": "N/I", 
    "Sexo": "N/I", 
    "Idade": "N/I", 
    "Gravidade das Lesões": "N/I", 
    "Morte": 0 
    }, 
    { 
    "Data": "04/01/11", 
    "Horário": "22:40", 
    "Endereço": "Rua José Maria de Carvalho e Silva", 
    "Nº": "", 
    "Bairro": "Jd Josane", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Leste", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 52, 
    "Gravidade das Lesões": "Fer. Indet.", 
    "Morte": 0 
    }, 
    { 
    "Data": "04/01/11", 
    "Horário": "22:40", 
    "Endereço": "Rua José Maria de Carvalho e Silva", 
    "Nº": "", 
    "Bairro": "Jd Josane", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Leste", 
    "Classificação": "Motorista", 
    "Sexo": "M", 
    "Idade": 20, 
    "Gravidade das Lesões": "Ileso", 
    "Morte": 0 
    }, 
    { 
    "Data": "06/01/11", 
    "Horário": "19:56", 
    "Endereço": "Av. Cataldo Lamarca Neto", 
    "Nº": 107, 
    "Bairro": "Vl Nova Sorocaba", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 2, 
    "Gravidade das Lesões": "Fer. Leve", 
    "Morte": 1 
    }, 
    { 
    "Data": "06/01/11", 
    "Horário": "19:56", 
    "Endereço": "Av. Cataldo Lamarca Neto", 
    "Nº": 107, 
    "Bairro": "Vl Nova Sorocaba", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 34, 
    "Gravidade das Lesões": "Fer. Leve", 
    "Morte": 1 
    }, 
    { 
    "Data": "06/01/11", 
    "Horário": "19:56", 
    "Endereço": "Av. Cataldo Lamarca Neto", 
    "Nº": 107, 
    "Bairro": "Vl Nova Sorocaba", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Motociclista", 
    "Sexo": "M", 
    "Idade": 29, 
    "Gravidade das Lesões": "Ileso", 
    "Morte": 0 
    }, 
    { 
    "Data": "07/01/11", 
    "Horário": "17:49", 
    "Endereço": "Av. Itavuvu", 
    "Nº": 1388, 
    "Bairro": "Jd Portal do Itavuvu", 
    "Cruzamento": "Al. Augusto Severo", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 32, 
    "Gravidade das Lesões": "Fer. Leve", 
    "Morte": 1 
    }, 
    { 
    "Data": "07/01/11", 
    "Horário": "17:49", 
    "Endereço": "Av. Itavuvu", 
    "Nº": 1388, 
    "Bairro": "Jd Portal do Itavuvu", 
    "Cruzamento": "Al. Augusto Severo", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Motorista", 
    "Sexo": "M", 
    "Idade": 29, 
    "Gravidade das Lesões": "Ileso", 
    "Morte": 0 
    }, 
    { 
    "Data": "08/01/11", 
    "Horário": "12:20", 
    "Endereço": "Av. Riusaku Kanizawa", 
    "Nº": 696, 
    "Bairro": "Jd Califórnia", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Oeste", 
    "Classificação": "Pedestre", 
    "Sexo": "F", 
    "Idade": 13, 
    "Gravidade das Lesões": "Fer. Indet.", 
    "Morte": 0 
    }, 
    { 
    "Data": "08/01/11", 
    "Horário": "12:20", 
    "Endereço": "Av. Riusaku Kanizawa", 
    "Nº": 696, 
    "Bairro": "Jd Califórnia", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Oeste", 
    "Classificação": "Motociclista", 
    "Sexo": "F", 
    "Idade": 26, 
    "Gravidade das Lesões": "Fer. Indet.", 
    "Morte": 0 
    }, 
    { 
    "Data": "08/01/11", 
    "Horário": "21:45", 
    "Endereço": "Av. Washington Luiz", 
    "Nº": 1000, 
    "Bairro": "Jd América", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Sul", 
    "Classificação": "Pedestre", 
    "Sexo": "F", 
    "Idade": 21, 
    "Gravidade das Lesões": "Fer. Grave", 
    "Morte": 0 
    }, 
    { 
    "Data": "08/01/11", 
    "Horário": "21:45", 
    "Endereço": "Av. Washington Luiz", 
    "Nº": 1000, 
    "Bairro": "Jd América", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Sul", 
    "Classificação": "Pedestre", 
    "Sexo": "F", 
    "Idade": 19, 
    "Gravidade das Lesões": "Fer. Grave", 
    "Morte": 0 
    }, 
    { 
    "Data": "08/01/11", 
    "Horário": "21:45", 
    "Endereço": "Av. Washington Luiz", 
    "Nº": 1000, 
    "Bairro": "Jd América", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Sul", 
    "Classificação": "Motorista", 
    "Sexo": "M", 
    "Idade": 43, 
    "Gravidade das Lesões": "Ileso", 
    "Morte": 0 
    }, 
    { 
    "Data": "09/01/11", 
    "Horário": "15:29", 
    "Endereço": "Rua Jovelina Maria de Brito", 
    "Nº": 20, 
    "Bairro": "Jd Nova Esperança", 
    "Cruzamento": "", 
    "Referência": "(Rua Projetada 2)", 
    "Região": "Oeste", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 4, 
    "Gravidade das Lesões": "Fer. Indet.", 
    "Morte": 0 
    }, 
    { 
    "Data": "09/01/11", 
    "Horário": "15:29", 
    "Endereço": "Rua Jovelina Maria de Brito", 
    "Nº": 20, 
    "Bairro": "Jd Nova Esperança", 
    "Cruzamento": "", 
    "Referência": "(Rua Projetada 2)", 
    "Região": "Oeste", 
    "Classificação": "N/I", 
    "Sexo": "N/I", 
    "Idade": "N/I", 
    "Gravidade das Lesões": "N/I", 
    "Morte": 0 
    }, 
    { 
    "Data": "09/01/11", 
    "Horário": "17:45", 
    "Endereço": "Rua Humberto Del Cistia", 
    "Nº": "", 
    "Bairro": "Vl Melges", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 72, 
    "Gravidade das Lesões": "Fer. Leve", 
    "Morte": 1 
    }, 
    { 
    "Data": "09/01/11", 
    "Horário": "17:45", 
    "Endereço": "Rua Humberto Del Cistia", 
    "Nº": "", 
    "Bairro": "Vl Melges", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Motociclista", 
    "Sexo": "N/I", 
    "Idade": "N/I", 
    "Gravidade das Lesões": "N/I", 
    "Morte": 0 
    }, 
    { 
    "Data": "09/01/11", 
    "Horário": "21:00", 
    "Endereço": "Rua Alcino Oliveira Rosa", 
    "Nº": "", 
    "Bairro": "Pq São Bento", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Motociclista", 
    "Sexo": "M", 
    "Idade": 23, 
    "Gravidade das Lesões": "Fer. Leve", 
    "Morte": 1 
    }, 
    { 
    "Data": "09/01/11", 
    "Horário": "21:00", 
    "Endereço": "Rua Alcino Oliveira Rosa", 
    "Nº": "", 
    "Bairro": "Pq São Bento", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Pedestre", 
    "Sexo": "F", 
    "Idade": 52, 
    "Gravidade das Lesões": "Fer. Leve", 
    "Morte": 1 
    }, 
    { 
    "Data": "11/01/11", 
    "Horário": "14:00", 
    "Endereço": "Rua Quinze de Novembro", 
    "Nº": 364, 
    "Bairro": "Centro", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Centro", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 90, 
    "Gravidade das Lesões": "Fer. Leve", 
    "Morte": 1 
    }, 
    { 
    "Data": "11/01/11", 
    "Horário": "14:00", 
    "Endereço": "Rua Quinze de Novembro", 
    "Nº": 364, 
    "Bairro": "Centro", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Centro", 
    "Classificação": "Ciclista", 
    "Sexo": "N/I", 
    "Idade": "N/I", 
    "Gravidade das Lesões": "N/I", 
    "Morte": 0 
    }, 
    { 
    "Data": "12/01/11", 
    "Horário": "12:35", 
    "Endereço": "Av. Gonçalves Magalhães", 
    "Nº": 1333, 
    "Bairro": "Vl Trujillo", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Oeste", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 8, 
    "Gravidade das Lesões": "Fer. Leve", 
    "Morte": 1 
    }, 
    { 
    "Data": "12/01/11", 
    "Horário": "12:35", 
    "Endereço": "Av. Gonçalves Magalhães", 
    "Nº": 1333, 
    "Bairro": "Vl Trujillo", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Oeste", 
    "Classificação": "Motorista", 
    "Sexo": "M", 
    "Idade": 30, 
    "Gravidade das Lesões": "Ileso", 
    "Morte": 0 
    }, 
    { 
    "Data": "17/01/11", 
    "Horário": "16:48", 
    "Endereço": "Av. Ipanema", 
    "Nº": 3401, 
    "Bairro": "Além Linha", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Pedestre", 
    "Sexo": "M", 
    "Idade": 38, 
    "Gravidade das Lesões": "Fer. Indet.", 
    "Morte": 0 
    }, 
    { 
    "Data": "17/01/11", 
    "Horário": "16:48", 
    "Endereço": "Av. Ipanema", 
    "Nº": 3401, 
    "Bairro": "Além Linha", 
    "Cruzamento": "", 
    "Referência": "", 
    "Região": "Norte", 
    "Classificação": "Motorista", 
    "Sexo": "M", 
    "Idade": 21, 
    "Gravidade das Lesões": "Ileso", 
    "Morte": 0 
    } 
]; 
+1

Пожалуйста, добавьте некоторые тестовые данные на ваш вопрос. – Mehraban

ответ

0

Пара вопросов:

домена для х не установлен, вы можете установить это следующим образом:

var x = d3.scaleTime() 
       .range([0, width]) 
       .domain(d3.extent(data, function(d){ 
        return d.hora; 
       })); 

Используйте данные, чтобы установить домен у весов не бункеров:

var y = d3.scaleLinear() 
       .domain([0, d3.max(data, function(d) { return d.mortos; })]) 
       .range([height, 0]); 

 Смежные вопросы

  • Нет связанных вопросов^_^