CODEWITHSUNDEEP
d3.js
George Wilson
George Wilson

Reputation: 5705

D3 Time based scales overflowing axis

I've been working on a similar stacked bar chart to that in the example here https://bl.ocks.org/mbostock/1134768 however running d3 v4 as shown in the fiddle here https://jsfiddle.net/z75L7cfz/7/

However as you can see in the fiddle, I have a problem that the last element in the graph extends off the end of the axis. I mean I guess this makes sense. But I'm not sure how to make this show in the graph and ensure all the elements fit into the supplied width of the graph.

I assume I need to modify the domain of the x-axis which is currently 

x.domain(d3.extent(data, function(d) { return d.Date; }));

But other than somehow manually adding an extra data point with no data in but the subsequent date I'm not sure how to manage this. If anyone could supply any pointers it would be hugely appreciated!

Upvotes: 1

Views: 323

Answers (2)

Gerardo Furtado
Gerardo Furtado

Reputation: 102194

Actually, there is nothing wrong with the code per se. The problem here is the very concept of a time scale, and the use of a bar chart with such scale.

If you look closely in your fiddle, each bar starts exactly where it should start, that is, the x value of each bar corresponds to the temporal value in the x axis. But a bar has a width, and here lies the problem: when you set the width to 18px (or any other value), the bar will overflow the time scale. That's normal and expected.

A time scale should be used with dots, where every dot (adimentional) sits exactly in the correct position of the time scale, or with a line, which is simply a path connecting the dots.

Having said all that, you have two options:

  1. Use an ordinal scale. A bar chart is not supposed to use a time scale, and a time scale is not supposed to be used with a bar chart. Bostock's code, for instance, uses an ordinal scale:

    var x = d3.scale.ordinal()

You can use scaleOrdinal or, better yet, scaleBand.

  1. If you want to stick to the time scale, change your chart to a line chart. Technically speaking, a line chart is the best option to visualize a trend in data over intervals of time.

Upvotes: 2

Marcelo
Marcelo

Reputation: 4282

For bar charts, it is best to use band scale. It calculates the bar sizes, location and padding. 

var x = d3.scaleBand()
    .range([0, width])
    .padding(0.05);

Here is the updated fiddle: https://jsfiddle.net/dtb02eze/2/

Upvotes: 2

Related Questions