Network Diagram NVD3 X Axis Ticks Missing

Question

I am using NVD3 to display a line chart here: http://jsbin.com/xodaxafiti/2/edit?js,output

But it seems that NVD3 automatically hides some tickLabels on XAxis, but only those ticks near the edge, i.e. 2-3Oct and 27-28Oct (except for the first and last tick). I know that this is an automatic reduction, because when I increase the width of the chart, ticks begin to appear. However, I find that this decreasing behavior is strange, and the Chart line does not have the reduceXTicks option, such as multiBarChart.

I want to be able to control the behavior of losing myself like this :

var chart = nv.models.lineChart() .useInteractiveGuideline(true) .margin({left: 80,top: 20,bottom: 120,right: 20}); chart.xAxis.ticks(function() { return data[0].map(chart.x()).filter(function(d,i) { i % Math.ceil(data[0].values.length / (availableWidth / 100)) === 0; }) }) 

But that did not work. Does anyone know how to control this?

Answer 1

Recovery behavior works because by default, showMaxMin set to true. Adding .showMaxMin(false) fixes the problem:

 chart.xAxis.axisLabel("XAxisLabel") .showMaxMin(false) .tickValues(tickvalues) .tickFormat(function (d) { return tickformat[d]; }) ; 

Answer 2

If you want to have both boundary ticks and marks close to the borders (MaxMin), you can change the source.

In nv.models.axis (), there is a buffer specified when showMaxMin is true for the lower / upper orientation:

 if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) { var maxMinRange = []; wrap.selectAll('g.nv-axisMaxMin') .each(function(d,i) { try { if (i) // i== 1, max position maxMinRange.push(scale(d) - this.getBoundingClientRect().width - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case) else // i==0, min position maxMinRange.push(scale(d) + this.getBoundingClientRect().width + 4) }catch (err) { if (i) // i== 1, max position maxMinRange.push(scale(d) - 4); //assuming the max and min labels are as wide as the next tick (with an extra 4 pixels just in case) else // i==0, min position maxMinRange.push(scale(d) + 4); } }); // the g wrapping each tick g.selectAll('g').each(function(d, i) { if (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]) { if (d > 1e-10 || d < -1e-10) // accounts for minor floating point errors... though could be problematic if the scale is EXTREMELY SMALL d3.select(this).remove(); else d3.select(this).select('text').remove(); // Don't remove the ZERO line!! } }); } 

I just deleted these buffers:

 try { if (i) // i== 1, max position maxMinRange.push(scale(d)); else // i==0, min position maxMinRange.push(scale(d)) }catch (err) { if (i) // i== 1, max position maxMinRange.push(scale(d)); else // i==0, min position maxMinRange.push(scale(d)); }