Browse Source

Fixed #970: Implemented options `dataColor`, `axisColor`, and `gridColor`.

flowchartTest
jos 8 years ago
parent
commit
01a351f6ac
6 changed files with 265 additions and 166 deletions
  1. +4
    -0
      HISTORY.md
  2. +94
    -64
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +19
    -19
      dist/vis.min.js
  5. +43
    -6
      docs/graph3d/index.html
  6. +104
    -76
      lib/graph3d/Graph3d.js

+ 4
- 0
HISTORY.md View File

@ -4,6 +4,10 @@ http://visjs.org
## not-yet-released, version 4.3.1-SNAPSHOT
### Graph3d
- Fixed #970: Implemented options `dataColor`, `axisColor`, and `gridColor`.
## 2015-06-16, version 4.3.0

+ 94
- 64
dist/vis.js View File

@ -5,7 +5,7 @@
* A dynamic, browser-based visualization library.
*
* @version 4.3.1-SNAPSHOT
* @date 2015-06-16
* @date 2015-06-17
*
* @license
* Copyright (C) 2011-2014 Almende B.V, http://almende.com
@ -6597,6 +6597,8 @@ return /******/ (function(modules) { // webpackBootstrap
this.animationPreload = false;
this.camera = new Camera();
this.camera.setArmRotation(1, 0.5);
this.camera.setArmLength(1.7);
this.eye = new Point3d(0, 0, -1); // TODO: set eye.z about 3/4 of the width of the window?
this.dataTable = null; // The original data table
@ -6624,11 +6626,14 @@ return /******/ (function(modules) { // webpackBootstrap
this.yBarWidth = 1;
// TODO: customize axis range
// constants
this.colorAxis = '#4D4D4D';
this.colorGrid = '#D3D3D3';
this.colorDot = '#7DC1FF';
this.colorDotBorder = '#3267D2';
// colors
this.axisColor = '#4D4D4D';
this.gridColor = '#D3D3D3';
this.dataColor = {
fill: '#7DC1FF',
stroke: '#3267D2',
strokeWidth: 1 // px
};
// create a frame and canvas
this.create();
@ -7384,13 +7389,29 @@ return /******/ (function(modules) { // webpackBootstrap
if (cameraPosition !== undefined) {
this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
this.camera.setArmLength(cameraPosition.distance);
} else {
this.camera.setArmRotation(1, 0.5);
this.camera.setArmLength(1.7);
}
}
this._setBackgroundColor(options && options.backgroundColor);
// colors
if (options.axisColor !== undefined) this.axisColor = options.axisColor;
if (options.gridColor !== undefined) this.gridColor = options.gridColor;
if (options.dataColor) {
if (typeof options.dataColor === 'string') {
this.dataColor.fill = options.dataColor;
this.dataColor.stroke = options.dataColor;
} else {
if (options.dataColor.fill) {
this.dataColor.fill = options.dataColor.fill;
}
if (options.dataColor.stroke) {
this.dataColor.stroke = options.dataColor.stroke;
}
if (options.dataColor.strokeWidth !== undefined) {
this.dataColor.strokeWidth = options.dataColor.strokeWidth;
}
}
}
this._setBackgroundColor(options.backgroundColor);
}
this.setSize(this.width, this.height);
@ -7493,14 +7514,14 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.stroke();
}
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.strokeRect(left, top, widthMax, height);
}
if (this.style === Graph3d.STYLE.DOTSIZE) {
// draw border around color bar
ctx.strokeStyle = this.colorAxis;
ctx.fillStyle = this.colorDot;
ctx.strokeStyle = this.axisColor;
ctx.fillStyle = this.dataColor.fill;
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(right, top);
@ -7529,7 +7550,7 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
step.next();
@ -7651,7 +7672,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.showGrid) {
from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
ctx.strokeStyle = this.colorGrid;
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7659,7 +7680,7 @@ return /******/ (function(modules) { // webpackBootstrap
} else {
from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMin + gridLenX, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7667,7 +7688,7 @@ return /******/ (function(modules) { // webpackBootstrap
from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMax - gridLenX, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7687,7 +7708,7 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(' ' + this.xValueLabel(step.getCurrent()) + ' ', text.x, text.y);
step.next();
@ -7705,7 +7726,7 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.showGrid) {
from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.colorGrid;
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7713,7 +7734,7 @@ return /******/ (function(modules) { // webpackBootstrap
} else {
from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMin + gridLenY, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7721,7 +7742,7 @@ return /******/ (function(modules) { // webpackBootstrap
from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax - gridLenY, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7741,7 +7762,7 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(' ' + this.yValueLabel(step.getCurrent()) + ' ', text.x, text.y);
step.next();
@ -7760,7 +7781,7 @@ return /******/ (function(modules) { // webpackBootstrap
while (!step.end()) {
// TODO: make z-grid lines really 3d?
from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(from.x - textMargin, from.y);
@ -7768,7 +7789,7 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(this.zValueLabel(step.getCurrent()) + ' ', from.x - 5, from.y);
step.next();
@ -7776,7 +7797,7 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.lineWidth = 1;
from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7787,7 +7808,7 @@ return /******/ (function(modules) { // webpackBootstrap
// line at yMin
xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(xMin2d.x, xMin2d.y);
ctx.lineTo(xMax2d.x, xMax2d.y);
@ -7795,7 +7816,7 @@ return /******/ (function(modules) { // webpackBootstrap
// line at ymax
xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(xMin2d.x, xMin2d.y);
ctx.lineTo(xMax2d.x, xMax2d.y);
@ -7806,7 +7827,7 @@ return /******/ (function(modules) { // webpackBootstrap
// line at xMin
from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7814,7 +7835,7 @@ return /******/ (function(modules) { // webpackBootstrap
// line at xMax
from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -7837,7 +7858,7 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(xLabel, text.x, text.y);
}
@ -7858,7 +7879,7 @@ return /******/ (function(modules) { // webpackBootstrap
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(yLabel, text.x, text.y);
}
@ -7872,7 +7893,7 @@ return /******/ (function(modules) { // webpackBootstrap
text = this._convert3Dto2D(new Point3d(xText, yText, zText));
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(zLabel, text.x - offset, text.y);
}
};
@ -7932,6 +7953,9 @@ return /******/ (function(modules) { // webpackBootstrap
v,
zAvg;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
if (this.dataPoints === undefined || this.dataPoints.length <= 0) return; // TODO: throw exception?
// calculate the translations and screen position of all points
@ -7991,15 +8015,14 @@ return /******/ (function(modules) { // webpackBootstrap
} else {
v = 1;
fillStyle = this._hsv2rgb(h, s, v);
strokeStyle = this.colorAxis;
strokeStyle = this.axisColor;
}
} else {
fillStyle = 'gray';
strokeStyle = this.colorAxis;
strokeStyle = this.axisColor;
}
lineWidth = 0.5;
ctx.lineWidth = lineWidth;
ctx.lineWidth = this._getStrokeWidth(point);
ctx.fillStyle = fillStyle;
ctx.strokeStyle = strokeStyle;
ctx.beginPath();
@ -8019,20 +8042,12 @@ return /******/ (function(modules) { // webpackBootstrap
right = this.dataPoints[i].pointRight;
top = this.dataPoints[i].pointTop;
if (point !== undefined) {
if (this.showPerspective) {
lineWidth = 2 / -point.trans.z;
} else {
lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
}
}
if (point !== undefined && right !== undefined) {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
zAvg = (point.point.z + right.point.z) / 2;
h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
ctx.lineWidth = lineWidth;
ctx.lineWidth = this._getStrokeWidth(point) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
@ -8045,7 +8060,7 @@ return /******/ (function(modules) { // webpackBootstrap
zAvg = (point.point.z + top.point.z) / 2;
h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
ctx.lineWidth = lineWidth;
ctx.lineWidth = this._getStrokeWidth(point) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
@ -8056,6 +8071,18 @@ return /******/ (function(modules) { // webpackBootstrap
}
};
Graph3d.prototype._getStrokeWidth = function (point) {
if (point !== undefined) {
if (this.showPerspective) {
return 1 / -point.trans.z * this.dataColor.strokeWidth;
} else {
return -(this.eye.z / this.camera.getArmLength()) * this.dataColor.strokeWidth;
}
}
return this.dataColor.strokeWidth;
};
/**
* Draw all datapoints as dots.
* This function can be used when the style is 'dot' or 'dot-line'
@ -8095,7 +8122,7 @@ return /******/ (function(modules) { // webpackBootstrap
//var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
var from = this._convert3Dto2D(point.bottom);
ctx.lineWidth = 1;
ctx.strokeStyle = this.colorGrid;
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(point.screen.x, point.screen.y);
@ -8127,8 +8154,8 @@ return /******/ (function(modules) { // webpackBootstrap
color = this._hsv2rgb(hue, 1, 1);
borderColor = this._hsv2rgb(hue, 1, 0.8);
} else if (this.style === Graph3d.STYLE.DOTSIZE) {
color = this.colorDot;
borderColor = this.colorDotBorder;
color = this.dataColor.fill;
borderColor = this.dataColor.stroke;
} else {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
@ -8137,7 +8164,7 @@ return /******/ (function(modules) { // webpackBootstrap
}
// draw the circle
ctx.lineWidth = 1;
ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = borderColor;
ctx.fillStyle = color;
ctx.beginPath();
@ -8176,6 +8203,9 @@ return /******/ (function(modules) { // webpackBootstrap
};
this.dataPoints.sort(sortDepth);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
// draw the datapoints as bars
var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2;
@ -8190,8 +8220,8 @@ return /******/ (function(modules) { // webpackBootstrap
color = this._hsv2rgb(hue, 1, 1);
borderColor = this._hsv2rgb(hue, 1, 0.8);
} else if (this.style === Graph3d.STYLE.BARSIZE) {
color = this.colorDot;
borderColor = this.colorDotBorder;
color = this.dataColor.fill;
borderColor = this.dataColor.stroke;
} else {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
hue = (1 - (point.point.z - this.zMin) * this.scale.z / this.verticalRatio) * 240;
@ -8247,7 +8277,7 @@ return /******/ (function(modules) { // webpackBootstrap
});
// draw the ordered surfaces
ctx.lineWidth = 1;
ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = borderColor;
ctx.fillStyle = color;
// NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
@ -8291,20 +8321,20 @@ return /******/ (function(modules) { // webpackBootstrap
if (this.dataPoints.length > 0) {
point = this.dataPoints[0];
ctx.lineWidth = 1; // TODO: make customizable
ctx.strokeStyle = 'blue'; // TODO: make customizable
ctx.lineWidth = this._getStrokeWidth(point);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = this.dataColor.stroke;
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
}
// draw the datapoints as colored circles
for (i = 1; i < this.dataPoints.length; i++) {
point = this.dataPoints[i];
ctx.lineTo(point.screen.x, point.screen.y);
}
// draw the datapoints as colored circles
for (i = 1; i < this.dataPoints.length; i++) {
point = this.dataPoints[i];
ctx.lineTo(point.screen.x, point.screen.y);
}
// finish the line
if (this.dataPoints.length > 0) {
// finish the line
ctx.stroke();
}
};

+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 19
- 19
dist/vis.min.js
File diff suppressed because it is too large
View File


+ 43
- 6
docs/graph3d/index.html View File

@ -296,6 +296,12 @@ var options = {
Can be either a simple HTML color string, for example: 'red' or '#00cc00',
or an object with the following properties.</td>
</tr>
<tr>
<td>backgroundColor.fill</td>
<td>string</td>
<td>'white'</td>
<td>The chart fill color, as an HTML color string.</td>
</tr>
<tr>
<td>backgroundColor.stroke</td>
<td>string</td>
@ -308,12 +314,6 @@ var options = {
<td>1</td>
<td>The border width, in pixels.</td>
</tr>
<tr>
<td>backgroundColor.fill</td>
<td>string</td>
<td>'white'</td>
<td>The chart fill color, as an HTML color string.</td>
</tr>
<tr>
<td>cameraPosition</td>
@ -331,6 +331,43 @@ var options = {
All parameters are optional.
</tr>
<tr>
<td>axisColor</td>
<td>string</td>
<td>'#4D4D4D'</td>
<td>The color of the axis lines and the text along the axis.</td>
</tr>
<tr>
<td>dataColor</td>
<td>string or object</td>
<td>{fill:&nbsp;'#7DC1FF', stroke:&nbsp;'#3267D2', strokeWidth:&nbsp;1}</td>
<td>When <code>dataColor</code> is a string, it will set the color for both border and fill color of dots and bars. Applicable for styles <code>dot-size</code>, <code>bar-size</code>, and <code>line</code>. When an object, it can contain the properties descibed below.</td>
</tr>
<tr>
<td>dataColor.fill</td>
<td>string</td>
<td>'#7DC1FF'</td>
<td>The border color of the dots or bars. Applicable when using styles <code>dot-size</code> or <code>bar-size</code>.</td>
</tr>
<tr>
<td>dataColor.stroke</td>
<td>string</td>
<td>'#3267D2'</td>
<td>The fill color of the dots or bars. Applicable when using styles <code>dot-size</code>, <code>bar-size</code>, or <code>line</code>.</td>
</tr>
<tr>
<td>dataColor.strokeWidth</td>
<td>number</td>
<td>1</td>
<td>The line width of dots, bars and lines. Applicable for all styles.</td>
</tr>
<tr>
<td>gridColor</td>
<td>string</td>
<td>'#D3D3D3'</td>
<td>The color of the grid lines.</td>
</tr>
<tr>
<td>height</td>
<td>string</td>

+ 104
- 76
lib/graph3d/Graph3d.js View File

@ -58,6 +58,8 @@ function Graph3d(container, data, options) {
this.animationPreload = false;
this.camera = new Camera();
this.camera.setArmRotation(1.0, 0.5);
this.camera.setArmLength(1.7);
this.eye = new Point3d(0, 0, -1); // TODO: set eye.z about 3/4 of the width of the window?
this.dataTable = null; // The original data table
@ -85,11 +87,14 @@ function Graph3d(container, data, options) {
this.yBarWidth = 1;
// TODO: customize axis range
// constants
this.colorAxis = '#4D4D4D';
this.colorGrid = '#D3D3D3';
this.colorDot = '#7DC1FF';
this.colorDotBorder = '#3267D2';
// colors
this.axisColor = '#4D4D4D';
this.gridColor = '#D3D3D3';
this.dataColor = {
fill: '#7DC1FF',
stroke: '#3267D2',
strokeWidth: 1 // px
};
// create a frame and canvas
this.create();
@ -823,21 +828,21 @@ Graph3d.prototype.setOptions = function (options) {
if (options !== undefined) {
// retrieve parameter values
if (options.width !== undefined) this.width = options.width;
if (options.height !== undefined) this.height = options.height;
if (options.width !== undefined) this.width = options.width;
if (options.height !== undefined) this.height = options.height;
if (options.xCenter !== undefined) this.defaultXCenter = options.xCenter;
if (options.yCenter !== undefined) this.defaultYCenter = options.yCenter;
if (options.xCenter !== undefined) this.defaultXCenter = options.xCenter;
if (options.yCenter !== undefined) this.defaultYCenter = options.yCenter;
if (options.filterLabel !== undefined) this.filterLabel = options.filterLabel;
if (options.legendLabel !== undefined) this.legendLabel = options.legendLabel;
if (options.xLabel !== undefined) this.xLabel = options.xLabel;
if (options.yLabel !== undefined) this.yLabel = options.yLabel;
if (options.zLabel !== undefined) this.zLabel = options.zLabel;
if (options.filterLabel !== undefined) this.filterLabel = options.filterLabel;
if (options.legendLabel !== undefined) this.legendLabel = options.legendLabel;
if (options.xLabel !== undefined) this.xLabel = options.xLabel;
if (options.yLabel !== undefined) this.yLabel = options.yLabel;
if (options.zLabel !== undefined) this.zLabel = options.zLabel;
if (options.xValueLabel !== undefined) this.xValueLabel = options.xValueLabel;
if (options.yValueLabel !== undefined) this.yValueLabel = options.yValueLabel;
if (options.zValueLabel !== undefined) this.zValueLabel = options.zValueLabel;
if (options.xValueLabel !== undefined) this.xValueLabel = options.xValueLabel;
if (options.yValueLabel !== undefined) this.yValueLabel = options.yValueLabel;
if (options.zValueLabel !== undefined) this.zValueLabel = options.zValueLabel;
if (options.style !== undefined) {
var styleNumber = this._getStyleNumber(options.style);
@ -878,14 +883,30 @@ Graph3d.prototype.setOptions = function (options) {
this.camera.setArmRotation(cameraPosition.horizontal, cameraPosition.vertical);
this.camera.setArmLength(cameraPosition.distance);
}
else {
this.camera.setArmRotation(1.0, 0.5);
this.camera.setArmLength(1.7);
// colors
if (options.axisColor !== undefined) this.axisColor = options.axisColor;
if (options.gridColor !== undefined) this.gridColor = options.gridColor;
if (options.dataColor) {
if (typeof options.dataColor === 'string') {
this.dataColor.fill = options.dataColor;
this.dataColor.stroke = options.dataColor;
}
else {
if (options.dataColor.fill) {
this.dataColor.fill = options.dataColor.fill;
}
if (options.dataColor.stroke) {
this.dataColor.stroke = options.dataColor.stroke;
}
if (options.dataColor.strokeWidth !== undefined) {
this.dataColor.strokeWidth = options.dataColor.strokeWidth;
}
}
}
this._setBackgroundColor(options.backgroundColor);
}
this._setBackgroundColor(options && options.backgroundColor);
this.setSize(this.width, this.height);
// re-load the data
@ -996,14 +1017,14 @@ Graph3d.prototype._redrawLegend = function() {
ctx.stroke();
}
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.strokeRect(left, top, widthMax, height);
}
if (this.style === Graph3d.STYLE.DOTSIZE) {
// draw border around color bar
ctx.strokeStyle = this.colorAxis;
ctx.fillStyle = this.colorDot;
ctx.strokeStyle = this.axisColor;
ctx.fillStyle = this.dataColor.fill;
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(right, top);
@ -1033,7 +1054,7 @@ Graph3d.prototype._redrawLegend = function() {
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
step.next();
@ -1149,7 +1170,7 @@ Graph3d.prototype._redrawAxis = function() {
if (this.showGrid) {
from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
ctx.strokeStyle = this.colorGrid;
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1158,7 +1179,7 @@ Graph3d.prototype._redrawAxis = function() {
else {
from = this._convert3Dto2D(new Point3d(x, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMin+gridLenX, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1166,7 +1187,7 @@ Graph3d.prototype._redrawAxis = function() {
from = this._convert3Dto2D(new Point3d(x, this.yMax, this.zMin));
to = this._convert3Dto2D(new Point3d(x, this.yMax-gridLenX, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1188,7 +1209,7 @@ Graph3d.prototype._redrawAxis = function() {
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(' ' + this.xValueLabel(step.getCurrent()) + ' ', text.x, text.y);
step.next();
@ -1206,7 +1227,7 @@ Graph3d.prototype._redrawAxis = function() {
if (this.showGrid) {
from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.colorGrid;
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1215,7 +1236,7 @@ Graph3d.prototype._redrawAxis = function() {
else {
from = this._convert3Dto2D(new Point3d(this.xMin, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMin+gridLenY, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1223,7 +1244,7 @@ Graph3d.prototype._redrawAxis = function() {
from = this._convert3Dto2D(new Point3d(this.xMax, step.getCurrent(), this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax-gridLenY, step.getCurrent(), this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1245,7 +1266,7 @@ Graph3d.prototype._redrawAxis = function() {
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(' ' + this.yValueLabel(step.getCurrent()) + ' ', text.x, text.y);
step.next();
@ -1264,7 +1285,7 @@ Graph3d.prototype._redrawAxis = function() {
while (!step.end()) {
// TODO: make z-grid lines really 3d?
from = this._convert3Dto2D(new Point3d(xText, yText, step.getCurrent()));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(from.x - textMargin, from.y);
@ -1272,7 +1293,7 @@ Graph3d.prototype._redrawAxis = function() {
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(this.zValueLabel(step.getCurrent()) + ' ', from.x - 5, from.y);
step.next();
@ -1280,7 +1301,7 @@ Graph3d.prototype._redrawAxis = function() {
ctx.lineWidth = 1;
from = this._convert3Dto2D(new Point3d(xText, yText, this.zMin));
to = this._convert3Dto2D(new Point3d(xText, yText, this.zMax));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1291,7 +1312,7 @@ Graph3d.prototype._redrawAxis = function() {
// line at yMin
xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(xMin2d.x, xMin2d.y);
ctx.lineTo(xMax2d.x, xMax2d.y);
@ -1299,7 +1320,7 @@ Graph3d.prototype._redrawAxis = function() {
// line at ymax
xMin2d = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
xMax2d = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(xMin2d.x, xMin2d.y);
ctx.lineTo(xMax2d.x, xMax2d.y);
@ -1310,7 +1331,7 @@ Graph3d.prototype._redrawAxis = function() {
// line at xMin
from = this._convert3Dto2D(new Point3d(this.xMin, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMin, this.yMax, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1318,7 +1339,7 @@ Graph3d.prototype._redrawAxis = function() {
// line at xMax
from = this._convert3Dto2D(new Point3d(this.xMax, this.yMin, this.zMin));
to = this._convert3Dto2D(new Point3d(this.xMax, this.yMax, this.zMin));
ctx.strokeStyle = this.colorAxis;
ctx.strokeStyle = this.axisColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x, to.y);
@ -1343,7 +1364,7 @@ Graph3d.prototype._redrawAxis = function() {
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(xLabel, text.x, text.y);
}
@ -1366,7 +1387,7 @@ Graph3d.prototype._redrawAxis = function() {
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(yLabel, text.x, text.y);
}
@ -1380,7 +1401,7 @@ Graph3d.prototype._redrawAxis = function() {
text = this._convert3Dto2D(new Point3d(xText, yText, zText));
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.colorAxis;
ctx.fillStyle = this.axisColor;
ctx.fillText(zLabel, text.x - offset, text.y);
}
};
@ -1425,6 +1446,8 @@ Graph3d.prototype._redrawDataGrid = function() {
topSideVisible, fillStyle, strokeStyle, lineWidth,
h, s, v, zAvg;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
if (this.dataPoints === undefined || this.dataPoints.length <= 0)
return; // TODO: throw exception?
@ -1488,16 +1511,15 @@ Graph3d.prototype._redrawDataGrid = function() {
else {
v = 1;
fillStyle = this._hsv2rgb(h, s, v);
strokeStyle = this.colorAxis;
strokeStyle = this.axisColor;
}
}
else {
fillStyle = 'gray';
strokeStyle = this.colorAxis;
strokeStyle = this.axisColor;
}
lineWidth = 0.5;
ctx.lineWidth = lineWidth;
ctx.lineWidth = this._getStrokeWidth(point);
ctx.fillStyle = fillStyle;
ctx.strokeStyle = strokeStyle;
ctx.beginPath();
@ -1517,21 +1539,12 @@ Graph3d.prototype._redrawDataGrid = function() {
right = this.dataPoints[i].pointRight;
top = this.dataPoints[i].pointTop;
if (point !== undefined) {
if (this.showPerspective) {
lineWidth = 2 / -point.trans.z;
}
else {
lineWidth = 2 * -(this.eye.z / this.camera.getArmLength());
}
}
if (point !== undefined && right !== undefined) {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
zAvg = (point.point.z + right.point.z) / 2;
h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
ctx.lineWidth = lineWidth;
ctx.lineWidth = this._getStrokeWidth(point) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
@ -1544,7 +1557,7 @@ Graph3d.prototype._redrawDataGrid = function() {
zAvg = (point.point.z + top.point.z) / 2;
h = (1 - (zAvg - this.zMin) * this.scale.z / this.verticalRatio) * 240;
ctx.lineWidth = lineWidth;
ctx.lineWidth = this._getStrokeWidth(point) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
@ -1555,6 +1568,18 @@ Graph3d.prototype._redrawDataGrid = function() {
}
};
Graph3d.prototype._getStrokeWidth = function(point) {
if (point !== undefined) {
if (this.showPerspective) {
return 1 / -point.trans.z * this.dataColor.strokeWidth;
}
else {
return -(this.eye.z / this.camera.getArmLength()) * this.dataColor.strokeWidth;
}
}
return this.dataColor.strokeWidth;
};
/**
* Draw all datapoints as dots.
@ -1596,7 +1621,7 @@ Graph3d.prototype._redrawDataDot = function() {
//var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
var from = this._convert3Dto2D(point.bottom);
ctx.lineWidth = 1;
ctx.strokeStyle = this.colorGrid;
ctx.strokeStyle = this.gridColor;
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(point.screen.x, point.screen.y);
@ -1631,8 +1656,8 @@ Graph3d.prototype._redrawDataDot = function() {
borderColor = this._hsv2rgb(hue, 1, 0.8);
}
else if (this.style === Graph3d.STYLE.DOTSIZE) {
color = this.colorDot;
borderColor = this.colorDotBorder;
color = this.dataColor.fill;
borderColor = this.dataColor.stroke;
}
else {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
@ -1642,7 +1667,7 @@ Graph3d.prototype._redrawDataDot = function() {
}
// draw the circle
ctx.lineWidth = 1.0;
ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = borderColor;
ctx.fillStyle = color;
ctx.beginPath();
@ -1682,6 +1707,9 @@ Graph3d.prototype._redrawDataBar = function() {
};
this.dataPoints.sort(sortDepth);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
// draw the datapoints as bars
var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2;
@ -1697,8 +1725,8 @@ Graph3d.prototype._redrawDataBar = function() {
borderColor = this._hsv2rgb(hue, 1, 0.8);
}
else if (this.style === Graph3d.STYLE.BARSIZE) {
color = this.colorDot;
borderColor = this.colorDotBorder;
color = this.dataColor.fill;
borderColor = this.dataColor.stroke;
}
else {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
@ -1771,7 +1799,7 @@ Graph3d.prototype._redrawDataBar = function() {
});
// draw the ordered surfaces
ctx.lineWidth = 1;
ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = borderColor;
ctx.fillStyle = color;
// NOTE: we start at j=2 instead of j=0 as we don't need to draw the two surfaces at the backside
@ -1816,20 +1844,20 @@ Graph3d.prototype._redrawDataLine = function() {
if (this.dataPoints.length > 0) {
point = this.dataPoints[0];
ctx.lineWidth = 1; // TODO: make customizable
ctx.strokeStyle = 'blue'; // TODO: make customizable
ctx.lineWidth = this._getStrokeWidth(point);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = this.dataColor.stroke;
ctx.beginPath();
ctx.moveTo(point.screen.x, point.screen.y);
}
// draw the datapoints as colored circles
for (i = 1; i < this.dataPoints.length; i++) {
point = this.dataPoints[i];
ctx.lineTo(point.screen.x, point.screen.y);
}
// draw the datapoints as colored circles
for (i = 1; i < this.dataPoints.length; i++) {
point = this.dataPoints[i];
ctx.lineTo(point.screen.x, point.screen.y);
}
// finish the line
if (this.dataPoints.length > 0) {
// finish the line
ctx.stroke();
}
};

Loading…
Cancel
Save