Expose tickSize and tickPadding properties.

d3.chart.js

@@ -42,6 +42,18 @@ d3.chart.axis = function() {
     return axis;
   };
 
+  axis.tickSize = function(x) {
+    if (!arguments.length) return tickSize;
+    tickSize = +x;
+    return axis;
+  };
+
+  axis.tickPadding = function(x) {
+    if (!arguments.length) return tickPadding;
+    tickPadding = +x;
+    return axis;
+  };
+
   return axis;
 };
 // Inspired by http://informationandvisualization.de/blog/box-plot

examples/axis/axis-multiples.html

@@ -42,6 +42,10 @@ var m = [20, 20, 20, 20],
 var x = d3.time.scale().range([0, w]),
     y = d3.scale.linear().range([h, 0]);
 
+// X-axis.
+var xAxis = d3.chart.axis()
+    .scale(x);
+
 // An area generator, for the light fill.
 var area = d3.svg.area()
     .interpolate("monotone")
@@ -93,7 +97,7 @@ d3.csv("../data/stocks.csv", function(data) {
   svg.append("svg:g")
       .attr("class", "x axis")
       .attr("transform", "translate(0," + h + ")")
-      .call(d3.chart.axis().scale(x));
+      .call(xAxis);
 
   // Add the line path elements. Note: the y-domain is set per element.
   svg.append("svg:path")

src/chart/axis.js

@@ -41,5 +41,17 @@ d3.chart.axis = function() {
     return axis;
   };
 
+  axis.tickSize = function(x) {
+    if (!arguments.length) return tickSize;
+    tickSize = +x;
+    return axis;
+  };
+
+  axis.tickPadding = function(x) {
+    if (!arguments.length) return tickPadding;
+    tickPadding = +x;
+    return axis;
+  };
+
   return axis;
 };

test/chart/axis-test.js

@@ -25,10 +25,60 @@ suite.addBatch({
       }
     },
 
+    "tickSize": {
+      "defaults to six pixels": function(axis) {
+        assert.equal(axis.tickSize(), 6);
+      },
+      "can be defined as a number": function(axis) {
+        axis.tickSize(3);
+        assert.equal(axis.tickSize(), 3);
+      },
+      "coerces input value to a number": function(axis) {
+        axis.tickSize("3");
+        assert.strictEqual(axis.tickSize(), 3);
+      },
+      "affects the generated domain path": function(axis) {
+        axis.tickSize(3);
+        var g = d3.select("body").html("").append("svg:g").call(axis),
+            path = g.select("path.domain");
+        assert.equal(path.attr("d"), "M0,3V0H1V3");
+      },
+      "affects the generated tick lines": function(axis) {
+        axis.tickSize(3);
+        var g = d3.select("body").html("").append("svg:g").call(axis),
+            line = g.selectAll("g.tick line");
+        line.each(function() {
+          assert.equal(d3.select(this).attr("y2"), 3);
+        });
+      }
+    },
+
+    "tickPadding": {
+      "defaults to three pixels": function(axis) {
+        assert.equal(axis.tickPadding(), 3);
+      },
+      "can be defined as a number": function(axis) {
+        axis.tickPadding(6);
+        assert.equal(axis.tickPadding(), 6);
+      },
+      "coerces input value to a number": function(axis) {
+        axis.tickPadding("6");
+        assert.strictEqual(axis.tickPadding(), 6);
+      },
+      "affects the generated tick labels": function(axis) {
+        axis.tickSize(2).tickPadding(7);
+        var g = d3.select("body").html("").append("svg:g").call(axis),
+            text = g.selectAll("g.tick text");
+        text.each(function() {
+          assert.equal(d3.select(this).attr("y"), 9);
+        });
+      }
+    },
+
     "generates a domain path": function(axis) {
       var g = d3.select("body").html("").append("svg:g").call(axis),
-          path = g.select("path.domain");
-      assert.isFalse(path.empty());
+          path = g.selectAll("path.domain");
+      assert.equal(path[0].length, 1);
       assert.equal(path.attr("d"), "M0,6V0H1V6");
       assert.isNull(path.node().nextSibling);
     },