LOTS of tweaks to discreteBar and Axis. Only pad for the correct values if showValues, reduce unnused margins, prevent overlapping labels on axis with showMaxMin

examples/discreteBarChart.html

@@ -96,13 +96,12 @@ nv.addGraph(function() {
   var chart = nv.models.discreteBarChart()
       .x(function(d) { return d.label })
       .y(function(d) { return d.value })
-      .rotateLabels(-45)
-      //.staggerLabels(true)
+      //.rotateLabels(-45)  //TODO: get this to work!! for some reason text-anchor end automatically switches to middle and makes this fail
+      .staggerLabels(true)
       //.staggerLabels(historicalBarChart[0].values.length > 8)
       .tooltips(false)
       .showValues(true)
 
-
   d3.select('#chart1 svg')
       .datum(historicalBarChart)
     .transition().duration(500)

nv.d3.js

@@ -431,10 +431,14 @@ nv.models.axis = function() {
       //check if max and min overlap other values, if so, hide the values that overlap
       if (showMaxMin && (axis.orient() === 'left' || axis.orient() === 'right')) {
         g.selectAll('g') // the g's wrapping each tick
-            .filter(function(d,i) {
-              return d && (scale(d) < scale.range()[1] + 10 || scale(d) > scale.range()[0] - 10); // 10 is assuming text height is 16... if d is 0, leave it!
-            })
-            .remove();
+            .each(function(d,i) {
+              if (scale(d) < scale.range()[1] + 10 || scale(d) > scale.range()[0] - 10) { // 10 is assuming text height is 16... if d is 0, leave it!
+                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!!
+              }
+            });
       }
 
       if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {
@@ -447,10 +451,14 @@ nv.models.axis = function() {
                 maxMinRange.push(scale(d) + this.getBBox().width + 4)
             });
         g.selectAll('g') // the g's wrapping each tick
-            .filter(function(d,i) {
-              return d && (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]);
-            })
-            .remove();
+            .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!!
+              }
+            });
       }
 
 
@@ -1623,7 +1631,7 @@ nv.models.discreteBar = function() {
           //.range([availableHeight, 0]);
 
 
-      if (showValues) y.range([availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] < 0 ? 0 : 12]);
+      if (showValues) y.range([availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]);
       else y.range([availableHeight, 0]);
 
       //store old scales if they exist
@@ -1864,7 +1872,7 @@ nv.models.discreteBar = function() {
 }
 
 nv.models.discreteBarChart = function() {
-  var margin = {top: 30, right: 20, bottom: 50, left: 60},
+  var margin = {top: 10, right: 10, bottom: 50, left: 60},
       width = null,
       height = null,
       color = d3.scale.category20().range(),
@@ -1958,7 +1966,7 @@ nv.models.discreteBarChart = function() {
         .tickSize(-availableHeight, 0);
 
       g.select('.x.axis')
-          .attr('transform', 'translate(0,' + (y.range()[0] + (discretebar.showValues() ? 16 : 0)) + ')')
+          .attr('transform', 'translate(0,' + (y.range()[0] + ((discretebar.showValues() && y.domain()[0] < 0) ? 16 : 0)) + ')')
       //d3.transition(g.select('.x.axis'))
       g.select('.x.axis').transition().duration(0)
           .call(xAxis);

src/models/axis.js

@@ -165,10 +165,14 @@ nv.models.axis = function() {
       //check if max and min overlap other values, if so, hide the values that overlap
       if (showMaxMin && (axis.orient() === 'left' || axis.orient() === 'right')) {
         g.selectAll('g') // the g's wrapping each tick
-            .filter(function(d,i) {
-              return d && (scale(d) < scale.range()[1] + 10 || scale(d) > scale.range()[0] - 10); // 10 is assuming text height is 16... if d is 0, leave it!
-            })
-            .remove();
+            .each(function(d,i) {
+              if (scale(d) < scale.range()[1] + 10 || scale(d) > scale.range()[0] - 10) { // 10 is assuming text height is 16... if d is 0, leave it!
+                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!!
+              }
+            });
       }
 
       if (showMaxMin && (axis.orient() === 'top' || axis.orient() === 'bottom')) {
@@ -181,10 +185,14 @@ nv.models.axis = function() {
                 maxMinRange.push(scale(d) + this.getBBox().width + 4)
             });
         g.selectAll('g') // the g's wrapping each tick
-            .filter(function(d,i) {
-              return d && (scale(d) < maxMinRange[0] || scale(d) > maxMinRange[1]);
-            })
-            .remove();
+            .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!!
+              }
+            });
       }
 
 

src/models/discreteBar.js

@@ -50,7 +50,7 @@ nv.models.discreteBar = function() {
           //.range([availableHeight, 0]);
 
 
-      if (showValues) y.range([availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] < 0 ? 0 : 12]);
+      if (showValues) y.range([availableHeight - (y.domain()[0] < 0 ? 12 : 0), y.domain()[1] > 0 ? 12 : 0]);
       else y.range([availableHeight, 0]);
 
       //store old scales if they exist

src/models/discreteBarChart.js

@@ -1,6 +1,6 @@
 
 nv.models.discreteBarChart = function() {
-  var margin = {top: 30, right: 20, bottom: 50, left: 60},
+  var margin = {top: 10, right: 10, bottom: 50, left: 60},
       width = null,
       height = null,
       color = d3.scale.category20().range(),
@@ -94,7 +94,7 @@ nv.models.discreteBarChart = function() {
         .tickSize(-availableHeight, 0);
 
       g.select('.x.axis')
-          .attr('transform', 'translate(0,' + (y.range()[0] + (discretebar.showValues() ? 16 : 0)) + ')')
+          .attr('transform', 'translate(0,' + (y.range()[0] + ((discretebar.showValues() && y.domain()[0] < 0) ? 16 : 0)) + ')')
       //d3.transition(g.select('.x.axis'))
       g.select('.x.axis').transition().duration(0)
           .call(xAxis);