Ошибка: <rect>ширина атрибута: ожидаемая длина для svg d3 v4

Question

Я хотел создать график с диапазоном лет 2012-2017 и количеством инцидентов, произошедших за год. Я вложил данные. Я не могу создать гистограмму и получил ошибки: Ошибка: высота атрибута: ожидаемая длина, "NaN". и ошибка: ширина атрибута: ожидаемая длина, «15 430». Я пытался исправить ошибку, используя предыдущие посты, но безуспешно. Любая помощь с кодом или предложения будут оценены. спасибо

ЯШ:

//set the dimensions and margins of the graph
var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 50
},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
padding = 15;

// Fomat timeStamp to year
var dateFormat = d3.timeFormat("%Y");

//append the svg object to the body of the page
var svg = d3.select("#graph").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 + ")");

// Get the data
d3.json("https://moto.data.socrata.com/resource/jfwn-iu5d.json", 
function(data) {


// Objects
data.forEach(function(data) {
    data.incident_description = data.incident_description;
    data.incident_datetime = dateFormat(new 
Date(data.incident_datetime));
});

// Nest data by year of incident
var NestbyDate = d3.nest()
    .key(function(d) {
        return d.incident_datetime;
    })
    .key(function(d) {
        return d.incident_description + " " + d.incident_datetime;
    })
    .rollup(function(leaves) {
        return d3.sum(leaves, function(d) {
            return (d.incident_description)
        });
    })
    .entries(data);
console.log(NestbyDate);


data.forEach(function(data) {
    data.incident_description = +data.incident_description;
    data.incident_datetime = +data.incident_datetime;
});

var x_domain = d3.extent(NestbyDate, function(d) {
    return d.key;
});
var y_domain = d3.extent(NestbyDate, function(d) {
    return d.values;
});

// set the ranges
var x = d3.scaleLinear().domain(x_domain).range([padding, width]);
var y = d3.scaleLinear().domain([0, 550]).range([height, 0]);

// Add the X Axis
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x).ticks(6));

// Add the Y Axis
svg.append("g")
    .attr("class", "axis")
    .call(d3.axisLeft(y));

 //  Text label for the x-axis
  svg.append("text")
    .attr("x", width / 2)
    .attr("y", height + margin.top + 9)
    .style("text-anchor", "center")
    .text("Day Date Format")
    .text("Year");

// Text Label for y-axis
svg.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - margin.left)
    .attr("x", 0 - (height / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Number of crime incidents");

 // Draw the bars
 svg.selectAll(".rect")
    .data(NestbyDate)
    .enter()
    .append("rect")
    .attr("class", "bar")
    .attr("x", function(d) {
        return (d.key);
    })
    .attr("y", function(d) {
        return (d.values);
    })
    .attr("width", x.range())
    .attr("height", function(d) {
        return height - y(d.values);
    });
});

Answer 1

Вы сделали несколько вещей неправильно.

var x должно быть d3.scaleBand(), а не линейной шкалой.

Следовательно, домен для вашей оси X должен выглядеть следующим образом:

var x = d3.scaleBand().domain(NestbyDate.map(d => d.key))

и так как вы вкладываете данные, вы должны изменить y attr на d.values.length (вы также забыли добавить y() и x() в некоторые прямоугольные атрибуты) Вот эти изменения:

 svg.selectAll(".rect")
    .data(NestbyDate)
    .enter()
    .append("rect")
    .attr("class", "rect")
    .attr("x", function(d) {
        return x(d.key);
    })
    .attr("y", function(d) {
        return y(d.values.length);
    })
    .attr("width", x.bandwidth())
    .attr("height", function(d) {
        return y(0) - y(d.values.length);
    });
});

Я не очень внимательно смотрел на данные, но это должно дать вам представление о том, что вам нужно изменить, по крайней мере

Вот рабочий Плункер