堆棧內存溢出
  簡體   English   中英

D3中具有時間刻度誤差的直方圖

[英]Histogram with Time scale error in D3

 原文  2016-09-05 02:33:26  0   1    d3.js/ histogram/ date-histogram

問題描述

我正在嘗試制作一個直方圖，以顯示每小時的運行總次數。

字段是：數據；霍拉里奧；恩德雷索；Nº； Bairro；克魯薩門托；Referência；雷吉奧；Classificação； Sexo； Idade； Gravidade dasLesões； Morte

我必須從“Horário”（平均時間）和“ Morte”（死者）字段中獲取數據。

但是代碼給了我這個錯誤：意外的值translate（0，NaN）解析轉換屬性。 ... uments）; null == e？this.removeAttribute（t）：this.setAttribute（t，e）}}函數Ya（t，n）...

這是代碼： 

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

});

一些睾丸數據： 

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 個解決方案

解決方案1
 0  2016-09-07 15:46:14

幾個問題：

x的域未設置，您可以這樣設置： 

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

使用數據設置y標度域而不是bin： 

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

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 帶時間刻度的D3直方圖 D3時間和日期直方圖 在D3中創建時間刻度 使用序數刻度創建d3 v4直方圖 縮放d3時間軸的更好方法 數組索引的D3時間刻度 如何在d3中創建時間刻度？ D3：在時間尺度間隔中保留分鍾 D3 在時間軸上滾動 d3時間刻度給了我NaN
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM