Automatic Date Labeling for NVD3 Graphs

Question

I want the date labels to automatically be calculated, appear, and disappear when I change the focus range so that they don't overlap.

I am using a MultiBar graph with a focus chart with the default ordinal scale for nv.models.multiBar(). When I use .ticks(availableWidth / 100 ) on the xAxis, it seems to generate a tick label for EVERY date, or at least a very large number of them:

On nv.models.lineWithFocusChart(), the labels are automatically reduced to fit in a space. This could be because it uses the scale for nv.models.scatter() which is a d3.scale.linear(), but I'm not sure. I tried creating my own scale with the following:

x = d3.scale.ordinal() //as well as x = d3.scale.linear()
      .domain(d3.extent(data.map(function(d) {
                return d.values.map(function(d,i) {
                    var X = getX(d,i);
                    return X.getTime();
                });
            })))
         .range([0, availableWidth]);

I get the following for an ordinal scale:

and no labels for a linear scale. Will this approach work? If so, what am I doing wrong?

On nv.models.multiBarChart(), there is a .reduceXTicks(BOOLEAN) option but this only applies to multiBarChart and there doesn't seem to be an easy way to add it to nv.models.multiBar(). Can I somehow use this?

If there is anything I haven't tried please let me know. I don't want to calculate the labels myself and specify them using .tickValues()

spooky655 spooky655 · Accepted Answer · 2015-10-02T15:17:08

The solution was in fact to use d3.scale.linear() for the x axis. What I tried above didn't work because I was specifying the whole domain of the context chart, when I needed to specify the min and max of the current selection.

In chart(selection) {...}, I put

x = d3.scale.linear() 
     .range([0, availableWidth]);

and in onBrush(), I put x.domain([new Date(extent[0]), new Date(extent[1])]);, where extent contains the min and max dates of the selection in milliseconds.

Automatic Date Labeling for NVD3 Graphs

1 Answers