From e735b64e09e5517f6045249ffb1056de8cc30e49 Mon Sep 17 00:00:00 2001 From: nmehrle Date: Wed, 8 Feb 2017 14:08:33 -0500 Subject: [PATCH] Added showX(YZ)Axis options to Graph3d (#2686) * Added showX(YZ)Axis to Graph3d * Added show_Axis options to docs and playground example * Resolved merge conflict * Added show_Axis options to docs and playground example --- docs/graph3d/index.html | 20 +++- examples/graph3d/playground/index.html | 13 +++ examples/graph3d/playground/playground.js | 3 + lib/graph3d/Graph3d.js | 121 ++++++++++++---------- lib/graph3d/Settings.js | 3 + 5 files changed, 105 insertions(+), 55 deletions(-) mode change 100644 => 100755 lib/graph3d/Graph3d.js mode change 100644 => 100755 lib/graph3d/Settings.js diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index c29093b7..fd9ba49a 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -422,9 +422,27 @@ var options = { showGrid boolean true - If true, grid lines are draw in the x-y surface (the bottom of the 3d + If true, grid lines are drawn in the x-y surface (the bottom of the 3d graph). + + showXAxis + boolean + true + If true, X axis and X axis labels are drawn. + + + showYAxis + boolean + true + If true, Y axis and Y axis labels are drawn. + + + showZAxis + boolean + true + If true, Z axis and Z axis labels are drawn. + showPerspective boolean diff --git a/examples/graph3d/playground/index.html b/examples/graph3d/playground/index.html index 07013f14..25d891c5 100644 --- a/examples/graph3d/playground/index.html +++ b/examples/graph3d/playground/index.html @@ -112,6 +112,19 @@ showGrid + + showXAxis + + + + showYAxis + + + + showZAxis + + + showPerspective diff --git a/examples/graph3d/playground/playground.js b/examples/graph3d/playground/playground.js index a2e28728..6b2ee04f 100644 --- a/examples/graph3d/playground/playground.js +++ b/examples/graph3d/playground/playground.js @@ -406,6 +406,9 @@ function getOptions() { style: document.getElementById("style").value, showAnimationControls: (document.getElementById("showAnimationControls").checked != false), showGrid: (document.getElementById("showGrid").checked != false), + showXAxis: (document.getElementById("showXAxis").checked != false), + showYAxis: (document.getElementById("showYAxis").checked != false), + showZAxis: (document.getElementById("showZAxis").checked != false), showPerspective: (document.getElementById("showPerspective").checked != false), showLegend: (document.getElementById("showLegend").checked != false), showShadow: (document.getElementById("showShadow").checked != false), diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js old mode 100644 new mode 100755 index df2fd885..b0cbe8a0 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -45,6 +45,9 @@ var DEFAULTS = { xValueLabel : function(v) { return v; }, yValueLabel : function(v) { return v; }, zValueLabel : function(v) { return v; }, + showXAxis : true, + showYAxis : true, + showZAxis : true, showGrid : true, showPerspective : true, showShadow : false, @@ -1288,7 +1291,7 @@ Graph3d.prototype._redrawAxis = function() { to = new Point3d(x, yRange.max, zRange.min); this._line3d(ctx, from, to, this.gridColor); } - else { + else if (this.showXAxis) { from = new Point3d(x, yRange.min, zRange.min); to = new Point3d(x, yRange.min+gridLenX, zRange.min); this._line3d(ctx, from, to, this.axisColor); @@ -1298,10 +1301,12 @@ Graph3d.prototype._redrawAxis = function() { this._line3d(ctx, from, to, this.axisColor); } - yText = (armVector.x > 0) ? yRange.min : yRange.max; - var point3d = new Point3d(x, yText, zRange.min); - var msg = ' ' + this.xValueLabel(x) + ' '; - this.drawAxisLabelX(ctx, point3d, msg, armAngle, textMargin); + if (this.showXAxis) { + yText = (armVector.x > 0) ? yRange.min : yRange.max; + var point3d = new Point3d(x, yText, zRange.min); + var msg = ' ' + this.xValueLabel(x) + ' '; + this.drawAxisLabelX(ctx, point3d, msg, armAngle, textMargin); + } step.next(); } @@ -1320,7 +1325,7 @@ Graph3d.prototype._redrawAxis = function() { to = new Point3d(xRange.max, y, zRange.min); this._line3d(ctx, from, to, this.gridColor); } - else { + else if (this.showYAxis){ from = new Point3d(xRange.min, y, zRange.min); to = new Point3d(xRange.min+gridLenY, y, zRange.min); this._line3d(ctx, from, to, this.axisColor); @@ -1330,71 +1335,79 @@ Graph3d.prototype._redrawAxis = function() { this._line3d(ctx, from, to, this.axisColor); } - xText = (armVector.y > 0) ? xRange.min : xRange.max; - point3d = new Point3d(xText, y, zRange.min); - var msg = ' ' + this.yValueLabel(y) + ' '; - this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin); + if (this.showYAxis) { + xText = (armVector.y > 0) ? xRange.min : xRange.max; + point3d = new Point3d(xText, y, zRange.min); + var msg = ' ' + this.yValueLabel(y) + ' '; + this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin); + } step.next(); } // draw z-grid lines and axis - ctx.lineWidth = 1; - prettyStep = (this.defaultZStep === undefined); - step = new StepNumber(zRange.min, zRange.max, this.zStep, prettyStep); - step.start(true); + if (this.showZAxis) { + ctx.lineWidth = 1; + prettyStep = (this.defaultZStep === undefined); + step = new StepNumber(zRange.min, zRange.max, this.zStep, prettyStep); + step.start(true); - xText = (armVector.x > 0) ? xRange.min : xRange.max; - yText = (armVector.y < 0) ? yRange.min : yRange.max; + xText = (armVector.x > 0) ? xRange.min : xRange.max; + yText = (armVector.y < 0) ? yRange.min : yRange.max; - while (!step.end()) { - var z = step.getCurrent(); + while (!step.end()) { + var z = step.getCurrent(); - // TODO: make z-grid lines really 3d? - var from3d = new Point3d(xText, yText, z); - var from2d = this._convert3Dto2D(from3d); - to = new Point2d(from2d.x - textMargin, from2d.y); - this._line(ctx, from2d, to, this.axisColor); + // TODO: make z-grid lines really 3d? + var from3d = new Point3d(xText, yText, z); + var from2d = this._convert3Dto2D(from3d); + to = new Point2d(from2d.x - textMargin, from2d.y); + this._line(ctx, from2d, to, this.axisColor); - var msg = this.zValueLabel(z) + ' '; - this.drawAxisLabelZ(ctx, from3d, msg, 5); + var msg = this.zValueLabel(z) + ' '; + this.drawAxisLabelZ(ctx, from3d, msg, 5); - step.next(); - } + step.next(); + } - ctx.lineWidth = 1; - from = new Point3d(xText, yText, zRange.min); - to = new Point3d(xText, yText, zRange.max); - this._line3d(ctx, from, to, this.axisColor); + ctx.lineWidth = 1; + from = new Point3d(xText, yText, zRange.min); + to = new Point3d(xText, yText, zRange.max); + this._line3d(ctx, from, to, this.axisColor); + } // draw x-axis - var xMin2d; - var xMax2d; - ctx.lineWidth = 1; + if (this.showXAxis) { + var xMin2d; + var xMax2d; + ctx.lineWidth = 1; - // line at yMin - xMin2d = new Point3d(xRange.min, yRange.min, zRange.min); - xMax2d = new Point3d(xRange.max, yRange.min, zRange.min); - this._line3d(ctx, xMin2d, xMax2d, this.axisColor); - // line at ymax - xMin2d = new Point3d(xRange.min, yRange.max, zRange.min); - xMax2d = new Point3d(xRange.max, yRange.max, zRange.min); - this._line3d(ctx, xMin2d, xMax2d, this.axisColor); + // line at yMin + xMin2d = new Point3d(xRange.min, yRange.min, zRange.min); + xMax2d = new Point3d(xRange.max, yRange.min, zRange.min); + this._line3d(ctx, xMin2d, xMax2d, this.axisColor); + // line at ymax + xMin2d = new Point3d(xRange.min, yRange.max, zRange.min); + xMax2d = new Point3d(xRange.max, yRange.max, zRange.min); + this._line3d(ctx, xMin2d, xMax2d, this.axisColor); + } // draw y-axis - ctx.lineWidth = 1; - // line at xMin - from = new Point3d(xRange.min, yRange.min, zRange.min); - to = new Point3d(xRange.min, yRange.max, zRange.min); - this._line3d(ctx, from, to, this.axisColor); - // line at xMax - from = new Point3d(xRange.max, yRange.min, zRange.min); - to = new Point3d(xRange.max, yRange.max, zRange.min); - this._line3d(ctx, from, to, this.axisColor); + if (this.showYAxis) { + ctx.lineWidth = 1; + // line at xMin + from = new Point3d(xRange.min, yRange.min, zRange.min); + to = new Point3d(xRange.min, yRange.max, zRange.min); + this._line3d(ctx, from, to, this.axisColor); + // line at xMax + from = new Point3d(xRange.max, yRange.min, zRange.min); + to = new Point3d(xRange.max, yRange.max, zRange.min); + this._line3d(ctx, from, to, this.axisColor); + } // draw x-label var xLabel = this.xLabel; - if (xLabel.length > 0) { + if (xLabel.length > 0 && this.showXAxis) { yOffset = 0.1 / this.scale.y; xText = (xRange.max + 3*xRange.min)/4; yText = (armVector.x > 0) ? yRange.min - yOffset: yRange.max + yOffset; @@ -1404,7 +1417,7 @@ Graph3d.prototype._redrawAxis = function() { // draw y-label var yLabel = this.yLabel; - if (yLabel.length > 0) { + if (yLabel.length > 0 && this.showYAxis) { xOffset = 0.1 / this.scale.x; xText = (armVector.y > 0) ? xRange.min - xOffset : xRange.max + xOffset; yText = (yRange.max + 3*yRange.min)/4; @@ -1415,7 +1428,7 @@ Graph3d.prototype._redrawAxis = function() { // draw z-label var zLabel = this.zLabel; - if (zLabel.length > 0) { + if (zLabel.length > 0 && this.showZAxis) { offset = 30; // pixels. // TODO: relate to the max width of the values on the z axis? xText = (armVector.x > 0) ? xRange.min : xRange.max; yText = (armVector.y < 0) ? yRange.min : yRange.max; diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js old mode 100644 new mode 100755 index edb41538..75566748 --- a/lib/graph3d/Settings.js +++ b/lib/graph3d/Settings.js @@ -53,6 +53,9 @@ var OPTIONKEYS = [ 'xValueLabel', 'yValueLabel', 'zValueLabel', + 'showXAxis', + 'showYAxis', + 'showZAxis', 'showGrid', 'showPerspective', 'showShadow',