我正在尝试制作一个直方图，显示每小时的总跑数。
领域是：数据;Horário;Endereço;Nº; Bairro; Cruzamento;Referência;Região;Classificação; Sexo; Idade; GravidadedasLesões; Morte
我必须从字段'Horário'（表示时间）和'Morte'（死亡）字段中获取数据。
但是代码给了我这个错误： 意外值translate（0，NaN）解析转换属性。 ... uments）; null == e？this.removeAttribute（t）：this.setAttribute（t，e）}} function 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
}
];
答案 0 :(得分：0)
几个问题：
未设置x的域，您可以这样设置：
var x = d3.scaleTime()
.range([0, width])
.domain(d3.extent(data, function(d){
return d.hora;
}));
使用数据设置y scale domain而不是bin：
var y = d3.scaleLinear()
.domain([0, d3.max(data, function(d) { return d.mortos; })])
.range([height, 0]);