Allow custom ticks and tickFormat.

Rather than specifying the ticks directly, you specify the arguments that will
be passed to the scale's ticks function. I suppose there are some obscure cases
where you might want more direct control over the generation of ticks, but this
makes the common case easy, and we could add a tickFunction property in the
future if we wanted to allow arbitrary control. Alternatively, you could write
a new scale type that supports the desired tick behavior (e.g., time scale).

d3.chart.js

@@ -2,7 +2,9 @@
 d3.chart.axis = function() {
   var scale = d3.scale.linear(),
       tickSize = 6,
-      tickPadding = 3;
+      tickPadding = 3,
+      tickArguments_ = [10],
+      tickFormat_;
 
   function axis(selection) {
     selection.each(function(d, i, j) {
@@ -10,8 +12,8 @@ d3.chart.axis = function() {
 
       // Scale data.
       var range = scale.range(),
-          ticks = scale.ticks(10),
-          tickFormat = scale.tickFormat(10);
+          ticks = scale.ticks.apply(scale, tickArguments_),
+          tickFormat = tickFormat_ || scale.tickFormat.apply(scale, tickArguments_);
 
       // If the transition is interrupted, then really we'd prefer to know the
       // current state of the scale rather than the previous state (at the end
@@ -90,6 +92,18 @@ d3.chart.axis = function() {
     return axis;
   };
 
+  axis.ticks = function() {
+    if (!arguments.length) return tickArguments_;
+    tickArguments_ = arguments;
+    return axis;
+  };
+
+  axis.tickFormat = function(x) {
+    if (!arguments.length) return tickFormat_;
+    tickFormat_ = x;
+    return axis;
+  };
+
   return axis;
 };
 // Inspired by http://informationandvisualization.de/blog/box-plot

src/chart/axis.js

@@ -1,7 +1,9 @@
 d3.chart.axis = function() {
   var scale = d3.scale.linear(),
       tickSize = 6,
-      tickPadding = 3;
+      tickPadding = 3,
+      tickArguments_ = [10],
+      tickFormat_;
 
   function axis(selection) {
     selection.each(function(d, i, j) {
@@ -9,8 +11,8 @@ d3.chart.axis = function() {
 
       // Scale data.
       var range = scale.range(),
-          ticks = scale.ticks(10),
-          tickFormat = scale.tickFormat(10);
+          ticks = scale.ticks.apply(scale, tickArguments_),
+          tickFormat = tickFormat_ || scale.tickFormat.apply(scale, tickArguments_);
 
       // If the transition is interrupted, then really we'd prefer to know the
       // current state of the scale rather than the previous state (at the end
@@ -89,5 +91,17 @@ d3.chart.axis = function() {
     return axis;
   };
 
+  axis.ticks = function() {
+    if (!arguments.length) return tickArguments_;
+    tickArguments_ = arguments;
+    return axis;
+  };
+
+  axis.tickFormat = function(x) {
+    if (!arguments.length) return tickFormat_;
+    tickFormat_ = x;
+    return axis;
+  };
+
   return axis;
 };

test/chart/axis-test.js

@@ -90,6 +90,80 @@ suite.addBatch({
       }
     },
 
+    "ticks": {
+      "defaults to 10": function(axis) {
+        var a = axis();
+        assert.deepEqual(a.ticks(), [10]);
+      },
+      "can be defined as any arguments": function(axis) {
+        var b = {}, a = axis().ticks(b, 42), t = a.ticks();
+        assert.equal(t[0], b);
+        assert.equal(t[1], 42);
+        assert.equal(t.length, 2);
+      },
+      "passes any arguments to the scale's ticks function": function(axis) {
+        var x = d3.scale.linear(), b = {}, a = axis().ticks(b, 42).scale(x), aa = [],
+            g = d3.select("body").html("").append("svg:g");
+        x.ticks = function() { aa.push(arguments); return [42]; };
+        g.call(a);
+        assert.equal(aa.length, 1);
+        assert.equal(aa[0].length, 2);
+        assert.equal(aa[0][0], b);
+        assert.equal(aa[0][1], 42);
+      },
+      "affects the generated ticks": function(axis) {
+        var a = axis().ticks(20),
+            g = d3.select("body").html("").append("svg:g").call(a),
+            t = g.selectAll("g.tick");
+        assert.equal(t[0].length, 21);
+      }
+    },
+
+    "tickFormat": {
+      "defaults to null": function(axis) {
+        var a = axis();
+        assert.isTrue(a.tickFormat() == null);
+      },
+      "when null, uses the scale's tick format": function(axis) {
+        var x = d3.scale.linear(), a = axis().scale(x),
+            g = d3.select("body").html("").append("svg:g");
+
+        x.tickFormat = function() {
+          return function(d) {
+            return "foo-" + d;
+          };
+        };
+
+        g.call(a);
+        var t = g.selectAll("g.tick text");
+        assert.equal(t.text(), "foo-0");
+      },
+      "passes any arguments to the scale's tick format function": function(axis) {
+        var b = {},
+            x = d3.scale.linear(),
+            a = axis().scale(x).ticks(b, 42),
+            g = d3.select("body").html("").append("svg:g"),
+            aa = [];
+
+        x.tickFormat = function() {
+          aa.push(arguments);
+          return String;
+        };
+
+        g.call(a);
+        assert.equal(aa.length, 1);
+        assert.equal(aa[0].length, 2);
+        assert.equal(aa[0][0], b);
+        assert.equal(aa[0][1], 42);
+      },
+      "affects the generated tick labels": function(axis) {
+        var a = axis().tickFormat(d3.format("+.2%")),
+            g = d3.select("body").html("").append("svg:g").call(a),
+            t = g.selectAll("g.tick text");
+        assert.equal(t.text(), "+0.00%");
+      }
+    },
+
     "enter": {
       "generates a new domain path": function(axis) {
         var a = axis(),