Accepted answer

The problem lies here:

var extent = d3.extent(data, function(d) { return d.value; });

This line sets the domain of barScale and x. However, if you do this using d3.extent, you're actually saying that the domain goes from the minimum value to the maximum value...

[1, 5];

... meaning that the value 1 will be mapped to the minimum value of the range.

Instead of that, set the minimum value in the domain to zero:

var extent = [0, d3.max(data, d=>d.value)];

Which will have this result:

[0, 5];

Here is your updated fiddle:

Related Query

More Query from same tag