Skip to content
This repository was archived by the owner on Jul 29, 2019. It is now read-only.

Commit e735b64

Browse files
nmehrleyotamberk
nmehrle
authored and
yotamberk
committed
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
1 parent c16bf0f commit e735b64

File tree

5 files changed

+105
-55
lines changed

5 files changed

+105
-55
lines changed

‎docs/graph3d/index.html

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -422,9 +422,27 @@ <h2 id="Configuration_Options">Configuration Options</h2>
422422
<td>showGrid</td>
423423
<td>boolean</td>
424424
<td>true</td>
425-
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
425+
<td>If true, grid lines are drawn in the x-y surface (the bottom of the 3d
426426
graph).</td>
427427
</tr>
428+
<tr>
429+
<td>showXAxis</td>
430+
<td>boolean</td>
431+
<td>true</td>
432+
<td>If true, X axis and X axis labels are drawn.</td>
433+
</tr>
434+
<tr>
435+
<td>showYAxis</td>
436+
<td>boolean</td>
437+
<td>true</td>
438+
<td>If true, Y axis and Y axis labels are drawn.</td>
439+
</tr>
440+
<tr>
441+
<td>showZAxis</td>
442+
<td>boolean</td>
443+
<td>true</td>
444+
<td>If true, Z axis and Z axis labels are drawn.</td>
445+
</tr>
428446
<tr>
429447
<td>showPerspective</td>
430448
<td>boolean</td>

‎examples/graph3d/playground/index.html

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,19 @@ <h2>Options</h2>
112112
<td>showGrid</td>
113113
<td><input type="checkbox" id="showGrid" checked /></td>
114114
</tr>
115+
<tr>
116+
<td>showXAxis</td>
117+
<td><input type="checkbox" id="showXAxis" checked /></td>
118+
</tr>
119+
<tr>
120+
<td>showYAxis</td>
121+
<td><input type="checkbox" id="showYAxis" checked /></td>
122+
</tr>
123+
<tr>
124+
<td>showZAxis</td>
125+
<td><input type="checkbox" id="showZAxis" checked /></td>
126+
</tr>
127+
115128
<tr>
116129
<td>showPerspective</td>
117130
<td><input type="checkbox" id="showPerspective" checked /></td>

‎examples/graph3d/playground/playground.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -406,6 +406,9 @@ function getOptions() {
406406
style: document.getElementById("style").value,
407407
showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
408408
showGrid: (document.getElementById("showGrid").checked != false),
409+
showXAxis: (document.getElementById("showXAxis").checked != false),
410+
showYAxis: (document.getElementById("showYAxis").checked != false),
411+
showZAxis: (document.getElementById("showZAxis").checked != false),
409412
showPerspective: (document.getElementById("showPerspective").checked != false),
410413
showLegend: (document.getElementById("showLegend").checked != false),
411414
showShadow: (document.getElementById("showShadow").checked != false),

‎lib/graph3d/Graph3d.js

100644100755
Lines changed: 67 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,9 @@ var DEFAULTS = {
4545
xValueLabel : function(v) { return v; },
4646
yValueLabel : function(v) { return v; },
4747
zValueLabel : function(v) { return v; },
48+
showXAxis : true,
49+
showYAxis : true,
50+
showZAxis : true,
4851
showGrid : true,
4952
showPerspective : true,
5053
showShadow : false,
@@ -1288,7 +1291,7 @@ Graph3d.prototype._redrawAxis = function() {
12881291
to = new Point3d(x, yRange.max, zRange.min);
12891292
this._line3d(ctx, from, to, this.gridColor);
12901293
}
1291-
else {
1294+
else if (this.showXAxis) {
12921295
from = new Point3d(x, yRange.min, zRange.min);
12931296
to = new Point3d(x, yRange.min+gridLenX, zRange.min);
12941297
this._line3d(ctx, from, to, this.axisColor);
@@ -1298,10 +1301,12 @@ Graph3d.prototype._redrawAxis = function() {
12981301
this._line3d(ctx, from, to, this.axisColor);
12991302
}
13001303

1301-
yText = (armVector.x > 0) ? yRange.min : yRange.max;
1302-
var point3d = new Point3d(x, yText, zRange.min);
1303-
var msg = ' ' + this.xValueLabel(x) + ' ';
1304-
this.drawAxisLabelX(ctx, point3d, msg, armAngle, textMargin);
1304+
if (this.showXAxis) {
1305+
yText = (armVector.x > 0) ? yRange.min : yRange.max;
1306+
var point3d = new Point3d(x, yText, zRange.min);
1307+
var msg = ' ' + this.xValueLabel(x) + ' ';
1308+
this.drawAxisLabelX(ctx, point3d, msg, armAngle, textMargin);
1309+
}
13051310

13061311
step.next();
13071312
}
@@ -1320,7 +1325,7 @@ Graph3d.prototype._redrawAxis = function() {
13201325
to = new Point3d(xRange.max, y, zRange.min);
13211326
this._line3d(ctx, from, to, this.gridColor);
13221327
}
1323-
else {
1328+
else if (this.showYAxis){
13241329
from = new Point3d(xRange.min, y, zRange.min);
13251330
to = new Point3d(xRange.min+gridLenY, y, zRange.min);
13261331
this._line3d(ctx, from, to, this.axisColor);
@@ -1330,71 +1335,79 @@ Graph3d.prototype._redrawAxis = function() {
13301335
this._line3d(ctx, from, to, this.axisColor);
13311336
}
13321337

1333-
xText = (armVector.y > 0) ? xRange.min : xRange.max;
1334-
point3d = new Point3d(xText, y, zRange.min);
1335-
var msg = ' ' + this.yValueLabel(y) + ' ';
1336-
this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin);
1338+
if (this.showYAxis) {
1339+
xText = (armVector.y > 0) ? xRange.min : xRange.max;
1340+
point3d = new Point3d(xText, y, zRange.min);
1341+
var msg = ' ' + this.yValueLabel(y) + ' ';
1342+
this.drawAxisLabelY(ctx, point3d, msg, armAngle, textMargin);
1343+
}
13371344

13381345
step.next();
13391346
}
13401347

13411348
// draw z-grid lines and axis
1342-
ctx.lineWidth = 1;
1343-
prettyStep = (this.defaultZStep === undefined);
1344-
step = new StepNumber(zRange.min, zRange.max, this.zStep, prettyStep);
1345-
step.start(true);
1349+
if (this.showZAxis) {
1350+
ctx.lineWidth = 1;
1351+
prettyStep = (this.defaultZStep === undefined);
1352+
step = new StepNumber(zRange.min, zRange.max, this.zStep, prettyStep);
1353+
step.start(true);
13461354

1347-
xText = (armVector.x > 0) ? xRange.min : xRange.max;
1348-
yText = (armVector.y < 0) ? yRange.min : yRange.max;
1355+
xText = (armVector.x > 0) ? xRange.min : xRange.max;
1356+
yText = (armVector.y < 0) ? yRange.min : yRange.max;
13491357

1350-
while (!step.end()) {
1351-
var z = step.getCurrent();
1358+
while (!step.end()) {
1359+
var z = step.getCurrent();
13521360

1353-
// TODO: make z-grid lines really 3d?
1354-
var from3d = new Point3d(xText, yText, z);
1355-
var from2d = this._convert3Dto2D(from3d);
1356-
to = new Point2d(from2d.x - textMargin, from2d.y);
1357-
this._line(ctx, from2d, to, this.axisColor);
1361+
// TODO: make z-grid lines really 3d?
1362+
var from3d = new Point3d(xText, yText, z);
1363+
var from2d = this._convert3Dto2D(from3d);
1364+
to = new Point2d(from2d.x - textMargin, from2d.y);
1365+
this._line(ctx, from2d, to, this.axisColor);
13581366

1359-
var msg = this.zValueLabel(z) + ' ';
1360-
this.drawAxisLabelZ(ctx, from3d, msg, 5);
1367+
var msg = this.zValueLabel(z) + ' ';
1368+
this.drawAxisLabelZ(ctx, from3d, msg, 5);
13611369

1362-
step.next();
1363-
}
1370+
step.next();
1371+
}
13641372

1365-
ctx.lineWidth = 1;
1366-
from = new Point3d(xText, yText, zRange.min);
1367-
to = new Point3d(xText, yText, zRange.max);
1368-
this._line3d(ctx, from, to, this.axisColor);
1373+
ctx.lineWidth = 1;
1374+
from = new Point3d(xText, yText, zRange.min);
1375+
to = new Point3d(xText, yText, zRange.max);
1376+
this._line3d(ctx, from, to, this.axisColor);
1377+
}
13691378

13701379
// draw x-axis
1371-
var xMin2d;
1372-
var xMax2d;
1373-
ctx.lineWidth = 1;
1380+
if (this.showXAxis) {
1381+
var xMin2d;
1382+
var xMax2d;
1383+
ctx.lineWidth = 1;
13741384

1375-
// line at yMin
1376-
xMin2d = new Point3d(xRange.min, yRange.min, zRange.min);
1377-
xMax2d = new Point3d(xRange.max, yRange.min, zRange.min);
1378-
this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
1379-
// line at ymax
1380-
xMin2d = new Point3d(xRange.min, yRange.max, zRange.min);
1381-
xMax2d = new Point3d(xRange.max, yRange.max, zRange.min);
1382-
this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
1385+
// line at yMin
1386+
xMin2d = new Point3d(xRange.min, yRange.min, zRange.min);
1387+
xMax2d = new Point3d(xRange.max, yRange.min, zRange.min);
1388+
this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
1389+
// line at ymax
1390+
xMin2d = new Point3d(xRange.min, yRange.max, zRange.min);
1391+
xMax2d = new Point3d(xRange.max, yRange.max, zRange.min);
1392+
this._line3d(ctx, xMin2d, xMax2d, this.axisColor);
1393+
}
13831394

13841395
// draw y-axis
1385-
ctx.lineWidth = 1;
1386-
// line at xMin
1387-
from = new Point3d(xRange.min, yRange.min, zRange.min);
1388-
to = new Point3d(xRange.min, yRange.max, zRange.min);
1389-
this._line3d(ctx, from, to, this.axisColor);
1390-
// line at xMax
1391-
from = new Point3d(xRange.max, yRange.min, zRange.min);
1392-
to = new Point3d(xRange.max, yRange.max, zRange.min);
1393-
this._line3d(ctx, from, to, this.axisColor);
1396+
if (this.showYAxis) {
1397+
ctx.lineWidth = 1;
1398+
// line at xMin
1399+
from = new Point3d(xRange.min, yRange.min, zRange.min);
1400+
to = new Point3d(xRange.min, yRange.max, zRange.min);
1401+
this._line3d(ctx, from, to, this.axisColor);
1402+
// line at xMax
1403+
from = new Point3d(xRange.max, yRange.min, zRange.min);
1404+
to = new Point3d(xRange.max, yRange.max, zRange.min);
1405+
this._line3d(ctx, from, to, this.axisColor);
1406+
}
13941407

13951408
// draw x-label
13961409
var xLabel = this.xLabel;
1397-
if (xLabel.length > 0) {
1410+
if (xLabel.length > 0 && this.showXAxis) {
13981411
yOffset = 0.1 / this.scale.y;
13991412
xText = (xRange.max + 3*xRange.min)/4;
14001413
yText = (armVector.x > 0) ? yRange.min - yOffset: yRange.max + yOffset;
@@ -1404,7 +1417,7 @@ Graph3d.prototype._redrawAxis = function() {
14041417

14051418
// draw y-label
14061419
var yLabel = this.yLabel;
1407-
if (yLabel.length > 0) {
1420+
if (yLabel.length > 0 && this.showYAxis) {
14081421
xOffset = 0.1 / this.scale.x;
14091422
xText = (armVector.y > 0) ? xRange.min - xOffset : xRange.max + xOffset;
14101423
yText = (yRange.max + 3*yRange.min)/4;
@@ -1415,7 +1428,7 @@ Graph3d.prototype._redrawAxis = function() {
14151428

14161429
// draw z-label
14171430
var zLabel = this.zLabel;
1418-
if (zLabel.length > 0) {
1431+
if (zLabel.length > 0 && this.showZAxis) {
14191432
offset = 30; // pixels. // TODO: relate to the max width of the values on the z axis?
14201433
xText = (armVector.x > 0) ? xRange.min : xRange.max;
14211434
yText = (armVector.y < 0) ? yRange.min : yRange.max;

‎lib/graph3d/Settings.js

100644100755
Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -53,6 +53,9 @@ var OPTIONKEYS = [
5353
'xValueLabel',
5454
'yValueLabel',
5555
'zValueLabel',
56+
'showXAxis',
57+
'showYAxis',
58+
'showZAxis',
5659
'showGrid',
5760
'showPerspective',
5861
'showShadow',

0 commit comments

Comments
 (0)