Add gridlines and axis layers.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vega",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "Vega Runtime",
   "keywords": [
     "vega",

src/_config.js

@@ -18,6 +18,7 @@ vg.config.axis = {
   ticks: 10,
   padding: 3,
   axisColor: "#000",
+  gridColor: "#ccc",
   tickColor: "#000",
   tickLabelColor: "#000",
   axisWidth: 1,

src/_package.js

@@ -1,7 +1,7 @@
 var vg = {};
 
 // semantic versioning
-vg.version = '1.2.1';
+vg.version = '1.3.0';
 
 // type checking functions
 var toString = Object.prototype.toString;

src/canvas/marks.js

@@ -379,26 +379,32 @@ vg.canvas.marks = (function() {
 
   function drawGroup(g, scene, bounds) {
     if (!scene.items.length) return;
-    var items = scene.items, group,
+    var items = scene.items, group, axes,
         renderer = this, gx, gy, i, n, j, m;
 
     drawRect(g, scene, bounds);
 
     for (i=0, n=items.length; i<n; ++i) {
       group = items[i];
+      axes = group.axisItems || [];
       gx = group.x || 0;
       gy = group.y || 0;
 
       // render group contents
       g.save();
       g.translate(gx, gy);
-      if (bounds) bounds.translate(-gx, -gy);      
+      if (bounds) bounds.translate(-gx, -gy);
+      for (j=0, m=axes.length; j<m; ++j) {
+        if (axes[j].def.layer === "back") {
+          renderer.draw(g, axes[j], bounds);
+        }
+      }
       for (j=0, m=group.items.length; j<m; ++j) {
         renderer.draw(g, group.items[j], bounds);
       }
-      if (group.axisItems) {
-        for (j=0, m=group.axisItems.length; j<m; ++j) {
-          renderer.draw(g, group.axisItems[j], bounds);
+      for (j=0, m=axes.length; j<m; ++j) {
+        if (axes[j].def.layer !== "back") {
+          renderer.draw(g, axes[j], bounds);
         }
       }
       if (bounds) bounds.translate(gx, gy);

src/parse/axes.js

@@ -68,6 +68,12 @@ vg.parse.axes = (function() {
 
     // axis offset
     if (def.offset) axis.offset(def.offset);
+
+    // axis layer
+    if (def.layer) axis.layer(def.layer);
+
+    // axis grid lines
+    if (def.grid) axis.grid(def.grid);
 
     // style properties
     if (def.properties) {
@@ -82,6 +88,7 @@ vg.parse.axes = (function() {
         if (p.minorTicks) axis.minorTickProperties(p.minorTicks);
       }
       if (p.labels) axis.tickLabelProperties(p.labels);
+      if (p.grid) axis.gridLineProperties(p.grid);
       if (p.axis) axis.domainProperties(p.axis);
     }
   }

src/parse/properties.js

@@ -38,6 +38,11 @@ vg.parse.properties = (function() {
               ? vg.str(ref.value)
               : "item.datum.data";
 
+    // get value from enclosing group
+    if (ref.group !== undefined) {
+      val = "group." + ref.group;
+    }
+
     // get data field value
     if (ref.field !== undefined) {
       val = "item.datum["