fix(axis): some consistency issues with label rotation (#114)

* Remove ineffective code in drawAxisLabel[XY]Rotate

* Set textAlign/Baseline explicitly in drawAxisLabel[XY]Rotate

The filled in values were taken from `console.log` outputs at the
corresponding locations.

* Make alignment of X labels more consistent with the Y labels

There is a very slight difference here, but most users probably won't
notice.

* Remove weird text offsets in drawAxisLabel[XY]Rotate

The position is already set by ctx.translate() *before* rotation. Adding
another offset by point/100 *after* rotation doesn't make sense to me
and is prone to give unexpected results. Also, the margin introduced by
these offsets look pretty large compared to the margins when drawing the
text unrotated.

* Remove additional drawing orientation for Y axis

This one was responsible for flipping the Y axis numbers from leftwards
to rightwards when the slope of the Y axis on screen becomes negative.
IMO, this is slightly weird because as viewer you have to readjust the
orientation in which you read, but more importantly this is inconsistent
with how the X axis is drawn (which simply doesn't make this
distinction). I think both axes should be drawn the same way.

* Change label orientation to bottom->top

lib/graph3d/Graph3d.js

@@ -1130,12 +1130,11 @@ Graph3d.prototype.drawAxisLabelXRotate = function (ctx, point3d, text, armAngle,
   if (Math.cos(armAngle * 2) > 0) {
     ctx.save();
     ctx.translate( point2d.x, point2d.y);
-    ctx.rotate( Math.PI / 2 );
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'middle';
     ctx.fillStyle = this.axisColor;
-    ctx.fillText(text, point2d.x/100, point2d.y/100 );
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'top';
-    point2d.y += yMargin;
+    ctx.fillText(text, 0, 0);
     ctx.restore();
   } else if (Math.sin(armAngle * 2) < 0) {
     ctx.textAlign = 'right';
@@ -1164,25 +1163,14 @@ Graph3d.prototype.drawAxisLabelYRotate = function (ctx, point3d, text, armAngle,
   }
 
   var point2d = this._convert3Dto2D(point3d);
-  if (Math.cos(armAngle * 2) < 0 && Math.sin(armAngle * 2) < 0) {
+  if (Math.cos(armAngle * 2) < 0 ) {
     ctx.save();
     ctx.translate( point2d.x, point2d.y);
-    ctx.rotate( (Math.PI / 2) * -1 );
-    ctx.fillStyle = this.axisColor;
-    ctx.fillText(text, point2d.x/100, point2d.y/100 );
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'top';
-    point2d.y += yMargin;
-    ctx.restore();
-  } else if (Math.cos(armAngle * 2) < 0 ) {
-    ctx.save();
-    ctx.translate( point2d.x, point2d.y);
-    ctx.rotate( Math.PI / 2 );
+    ctx.rotate(-Math.PI / 2);
+    ctx.textAlign = 'right';
+    ctx.textBaseline = 'middle';
     ctx.fillStyle = this.axisColor;
-    ctx.fillText(text, point2d.x/100, point2d.y/100 );
-    ctx.textAlign = 'center';
-    ctx.textBaseline = 'top';
-    point2d.y += yMargin;
+    ctx.fillText(text, 0, 0);
     ctx.restore();
   } else if (Math.sin(armAngle * 2) > 0) {
     ctx.textAlign = 'right';