Error: attribute width: Expected length, “NaN”. and attribute dx: Expected length, “NaN”

Question

I want to implement a bar chart in D3, but my values on the dx axis are of type Date, data type which the D3 library should accept, but it seems to give me an error like th

Answer 1

Right now, for the width of the rectangles and the dx of the texts, you're using:

xScale.range() - rectPadding

But xScale.range() returns an array, and array - number will give you a NaN. And you're not getting anywhere with a NaN...

Instead of xScale.range(), which will return an array, you should use:

xScale.bandwidth();

Which not only returns a proper number, but it's also what you're looking for.

Here is your code with that change:

---

PS: You don't need rectPadding. Just set the padding in the band scale:

var xScale = d3.scaleBand()
    .domain(d3.range(dataset.length))
    .range([0, width-padding.left-padding.right])
    .padding(0.2);//some value here