Browse Source

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
timelineLocalsFrEs
nmehrle 7 years ago
committed by yotamberk
parent
commit
e735b64e09
5 changed files with 105 additions and 55 deletions
  1. +19
    -1
      docs/graph3d/index.html
  2. +13
    -0
      examples/graph3d/playground/index.html
  3. +3
    -0
      examples/graph3d/playground/playground.js
  4. +67
    -54
      lib/graph3d/Graph3d.js
  5. +3
    -0
      lib/graph3d/Settings.js

+ 19
- 1
docs/graph3d/index.html View File

@ -422,9 +422,27 @@ var options = {
<td>showGrid</td> <td>showGrid</td>
<td>boolean</td> <td>boolean</td>
<td>true</td> <td>true</td>
<td>If true, grid lines are draw in the x-y surface (the bottom of the 3d
<td>If true, grid lines are drawn in the x-y surface (the bottom of the 3d
graph).</td> graph).</td>
</tr> </tr>
<tr>
<td>showXAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, X axis and X axis labels are drawn.</td>
</tr>
<tr>
<td>showYAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, Y axis and Y axis labels are drawn.</td>
</tr>
<tr>
<td>showZAxis</td>
<td>boolean</td>
<td>true</td>
<td>If true, Z axis and Z axis labels are drawn.</td>
</tr>
<tr> <tr>
<td>showPerspective</td> <td>showPerspective</td>
<td>boolean</td> <td>boolean</td>

+ 13
- 0
examples/graph3d/playground/index.html View File

@ -112,6 +112,19 @@
<td>showGrid</td> <td>showGrid</td>
<td><input type="checkbox" id="showGrid" checked /></td> <td><input type="checkbox" id="showGrid" checked /></td>
</tr> </tr>
<tr>
<td>showXAxis</td>
<td><input type="checkbox" id="showXAxis" checked /></td>
</tr>
<tr>
<td>showYAxis</td>
<td><input type="checkbox" id="showYAxis" checked /></td>
</tr>
<tr>
<td>showZAxis</td>
<td><input type="checkbox" id="showZAxis" checked /></td>
</tr>
<tr> <tr>
<td>showPerspective</td> <td>showPerspective</td>
<td><input type="checkbox" id="showPerspective" checked /></td> <td><input type="checkbox" id="showPerspective" checked /></td>

+ 3
- 0
examples/graph3d/playground/playground.js View File

@ -406,6 +406,9 @@ function getOptions() {
style: document.getElementById("style").value, style: document.getElementById("style").value,
showAnimationControls: (document.getElementById("showAnimationControls").checked != false), showAnimationControls: (document.getElementById("showAnimationControls").checked != false),
showGrid: (document.getElementById("showGrid").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), showPerspective: (document.getElementById("showPerspective").checked != false),
showLegend: (document.getElementById("showLegend").checked != false), showLegend: (document.getElementById("showLegend").checked != false),
showShadow: (document.getElementById("showShadow").checked != false), showShadow: (document.getElementById("showShadow").checked != false),

+ 67
- 54
lib/graph3d/Graph3d.js View File

@ -45,6 +45,9 @@ var DEFAULTS = {
xValueLabel : function(v) { return v; }, xValueLabel : function(v) { return v; },
yValueLabel : function(v) { return v; }, yValueLabel : function(v) { return v; },
zValueLabel : function(v) { return v; }, zValueLabel : function(v) { return v; },
showXAxis : true,
showYAxis : true,
showZAxis : true,
showGrid : true, showGrid : true,
showPerspective : true, showPerspective : true,
showShadow : false, showShadow : false,
@ -1288,7 +1291,7 @@ Graph3d.prototype._redrawAxis = function() {
to = new Point3d(x, yRange.max, zRange.min); to = new Point3d(x, yRange.max, zRange.min);
this._line3d(ctx, from, to, this.gridColor); this._line3d(ctx, from, to, this.gridColor);
} }
else {
else if (this.showXAxis) {
from = new Point3d(x, yRange.min, zRange.min); from = new Point3d(x, yRange.min, zRange.min);
to = new Point3d(x, yRange.min+gridLenX, zRange.min); to = new Point3d(x, yRange.min+gridLenX, zRange.min);
this._line3d(ctx, from, to, this.axisColor); this._line3d(ctx, from, to, this.axisColor);
@ -1298,10 +1301,12 @@ Graph3d.prototype._redrawAxis = function() {
this._line3d(ctx, from, to, this.axisColor); 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(); step.next();
} }
@ -1320,7 +1325,7 @@ Graph3d.prototype._redrawAxis = function() {
to = new Point3d(xRange.max, y, zRange.min); to = new Point3d(xRange.max, y, zRange.min);
this._line3d(ctx, from, to, this.gridColor); this._line3d(ctx, from, to, this.gridColor);
} }
else {
else if (this.showYAxis){
from = new Point3d(xRange.min, y, zRange.min); from = new Point3d(xRange.min, y, zRange.min);
to = new Point3d(xRange.min+gridLenY, y, zRange.min); to = new Point3d(xRange.min+gridLenY, y, zRange.min);
this._line3d(ctx, from, to, this.axisColor); this._line3d(ctx, from, to, this.axisColor);
@ -1330,71 +1335,79 @@ Graph3d.prototype._redrawAxis = function() {
this._line3d(ctx, from, to, this.axisColor); 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(); step.next();
} }
// draw z-grid lines and axis // 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 // 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 // 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 // draw x-label
var xLabel = this.xLabel; var xLabel = this.xLabel;
if (xLabel.length > 0) {
if (xLabel.length > 0 && this.showXAxis) {
yOffset = 0.1 / this.scale.y; yOffset = 0.1 / this.scale.y;
xText = (xRange.max + 3*xRange.min)/4; xText = (xRange.max + 3*xRange.min)/4;
yText = (armVector.x > 0) ? yRange.min - yOffset: yRange.max + yOffset; yText = (armVector.x > 0) ? yRange.min - yOffset: yRange.max + yOffset;
@ -1404,7 +1417,7 @@ Graph3d.prototype._redrawAxis = function() {
// draw y-label // draw y-label
var yLabel = this.yLabel; var yLabel = this.yLabel;
if (yLabel.length > 0) {
if (yLabel.length > 0 && this.showYAxis) {
xOffset = 0.1 / this.scale.x; xOffset = 0.1 / this.scale.x;
xText = (armVector.y > 0) ? xRange.min - xOffset : xRange.max + xOffset; xText = (armVector.y > 0) ? xRange.min - xOffset : xRange.max + xOffset;
yText = (yRange.max + 3*yRange.min)/4; yText = (yRange.max + 3*yRange.min)/4;
@ -1415,7 +1428,7 @@ Graph3d.prototype._redrawAxis = function() {
// draw z-label // draw z-label
var zLabel = this.zLabel; 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? offset = 30; // pixels. // TODO: relate to the max width of the values on the z axis?
xText = (armVector.x > 0) ? xRange.min : xRange.max; xText = (armVector.x > 0) ? xRange.min : xRange.max;
yText = (armVector.y < 0) ? yRange.min : yRange.max; yText = (armVector.y < 0) ? yRange.min : yRange.max;

+ 3
- 0
lib/graph3d/Settings.js View File

@ -53,6 +53,9 @@ var OPTIONKEYS = [
'xValueLabel', 'xValueLabel',
'yValueLabel', 'yValueLabel',
'zValueLabel', 'zValueLabel',
'showXAxis',
'showYAxis',
'showZAxis',
'showGrid', 'showGrid',
'showPerspective', 'showPerspective',
'showShadow', 'showShadow',

Loading…
Cancel
Save