jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2953 Commits
33 Branches
331 MiB
 
 
 
Tree: 02911c0d3a
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '02911c0d3a'
${ noResults }
jrtechs-vis/lib/graph3d/Graph3d.js

2490 lines
71 KiB
Raw Blame History

var Emitter = require('emitter-component'); var DataSet = require('../DataSet');
var DataView = require('../DataView');
var util = require('../util');
var Point3d = require('./Point3d');
var Point2d = require('./Point2d');
var Camera = require('./Camera');
var Filter = require('./Filter');
var Slider = require('./Slider');
var StepNumber = require('./StepNumber');
var Range = require('./Range');
var Settings = require('./Settings');
/// enumerate the available styles
Graph3d.STYLE = Settings.STYLE;
/**
* Following label is used in the settings to describe values which should be
* determined by the code while running, from the current data and graph style.
*
* Using 'undefined' directly achieves the same thing, but this is more
* descriptive by describing the intent.
*/
var autoByDefault = undefined;
/**
* Default values for option settings.
*
* These are the values used when a Graph3d instance is initialized without
* custom settings.
*
* If a field is not in this list, a default value of 'autoByDefault' is assumed,
* which is just an alias for 'undefined'.
*/
var DEFAULTS = {
width : '400px',
height : '400px',
filterLabel : 'time',
legendLabel : 'value',
xLabel : 'x',
yLabel : 'y',
zLabel : 'z',
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,
keepAspectRatio : true,
verticalRatio : 0.5, // 0.1 to 1.0, where 1.0 results in a 'cube'
dotSizeRatio : 0.02, // size of the dots as a fraction of the graph width
showAnimationControls: autoByDefault,
animationInterval : 1000, // milliseconds
animationPreload : false,
animationAutoStart : autoByDefault,
axisColor : '#4D4D4D',
gridColor : '#D3D3D3',
xCenter : '55%',
yCenter : '50%',
style : Graph3d.STYLE.DOT,
tooltip : false,
tooltipStyle : {
content : {
padding : '10px',
border : '1px solid #4d4d4d',
color : '#1a1a1a',
background : 'rgba(255,255,255,0.7)',
borderRadius : '2px',
boxShadow : '5px 5px 10px rgba(128,128,128,0.5)'
},
line : {
height : '40px',
width : '0',
borderLeft : '1px solid #4d4d4d'
},
dot : {
height : '0',
width : '0',
border : '5px solid #4d4d4d',
borderRadius : '5px'
}
},
showLegend : autoByDefault, // determined by graph style
backgroundColor : autoByDefault,
dataColor : {
fill : '#7DC1FF',
stroke : '#3267D2',
strokeWidth: 1 // px
},
cameraPosition : {
horizontal: 1.0,
vertical : 0.5,
distance : 1.7
},
xBarWidth : autoByDefault,
yBarWidth : autoByDefault,
valueMin : autoByDefault,
valueMax : autoByDefault,
xMin : autoByDefault,
xMax : autoByDefault,
xStep : autoByDefault,
yMin : autoByDefault,
yMax : autoByDefault,
yStep : autoByDefault,
zMin : autoByDefault,
zMax : autoByDefault,
zStep : autoByDefault
};
// -----------------------------------------------------------------------------
// Class Graph3d
// -----------------------------------------------------------------------------
/**
* @constructor Graph3d
* Graph3d displays data in 3d.
*
* Graph3d is developed in javascript as a Google Visualization Chart.
*
* @param {Element} container The DOM element in which the Graph3d will
* be created. Normally a div element.
* @param {DataSet | DataView | Array} [data]
* @param {Object} [options]
*/
function Graph3d(container, data, options) {
if (!(this instanceof Graph3d)) {
throw new SyntaxError('Constructor must be called with the new operator');
}
// create variables and set default values
this.containerElement = container;
this.dataTable = null; // The original data table
this.dataPoints = null; // The table with point objects
// create a frame and canvas
this.create();
Settings.setDefaults(DEFAULTS, this);
// the column indexes
this.colX = undefined;
this.colY = undefined;
this.colZ = undefined;
this.colValue = undefined;
this.colFilter = undefined;
// TODO: customize axis range
// apply options (also when undefined)
this.setOptions(options);
// apply data
if (data) {
this.setData(data);
}
}
// Extend Graph3d with an Emitter mixin
Emitter(Graph3d.prototype);
/**
* Calculate the scaling values, dependent on the range in x, y, and z direction
*/
Graph3d.prototype._setScale = function() {
this.scale = new Point3d(
1 / this.xRange.range(),
1 / this.yRange.range(),
1 / this.zRange.range()
);
// keep aspect ration between x and y scale if desired
if (this.keepAspectRatio) {
if (this.scale.x < this.scale.y) {
//noinspection JSSuspiciousNameCombination
this.scale.y = this.scale.x;
}
else {
//noinspection JSSuspiciousNameCombination
this.scale.x = this.scale.y;
}
}
// scale the vertical axis
this.scale.z *= this.verticalRatio;
// TODO: can this be automated? verticalRatio?
// determine scale for (optional) value
if (this.valueRange !== undefined) {
this.scale.value = 1 / this.valueRange.range();
}
// position the camera arm
var xCenter = this.xRange.center() * this.scale.x;
var yCenter = this.yRange.center() * this.scale.y;
var zCenter = this.zRange.center() * this.scale.z;
this.camera.setArmLocation(xCenter, yCenter, zCenter);
};
/**
* Convert a 3D location to a 2D location on screen
* Source: ttp://en.wikipedia.org/wiki/3D_projection
*
* @param {Point3d} point3d A 3D point with parameters x, y, z
* @returns {Point2d} point2d A 2D point with parameters x, y
*/
Graph3d.prototype._convert3Dto2D = function(point3d) {
var translation = this._convertPointToTranslation(point3d);
return this._convertTranslationToScreen(translation);
};
/**
* Convert a 3D location its translation seen from the camera
* Source: http://en.wikipedia.org/wiki/3D_projection
*
* @param {Point3d} point3d A 3D point with parameters x, y, z
* @returns {Point3d} translation A 3D point with parameters x, y, z This is
* the translation of the point, seen from the
* camera.
*/
Graph3d.prototype._convertPointToTranslation = function(point3d) {
var cameraLocation = this.camera.getCameraLocation(),
cameraRotation = this.camera.getCameraRotation(),
ax = point3d.x * this.scale.x,
ay = point3d.y * this.scale.y,
az = point3d.z * this.scale.z,
cx = cameraLocation.x,
cy = cameraLocation.y,
cz = cameraLocation.z,
// calculate angles
sinTx = Math.sin(cameraRotation.x),
cosTx = Math.cos(cameraRotation.x),
sinTy = Math.sin(cameraRotation.y),
cosTy = Math.cos(cameraRotation.y),
sinTz = Math.sin(cameraRotation.z),
cosTz = Math.cos(cameraRotation.z),
// calculate translation
dx = cosTy * (sinTz * (ay - cy) + cosTz * (ax - cx)) - sinTy * (az - cz),
dy = sinTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) + cosTx * (cosTz * (ay - cy) - sinTz * (ax-cx)),
dz = cosTx * (cosTy * (az - cz) + sinTy * (sinTz * (ay - cy) + cosTz * (ax - cx))) - sinTx * (cosTz * (ay - cy) - sinTz * (ax-cx));
return new Point3d(dx, dy, dz);
};
/**
* Convert a translation point to a point on the screen
*
* @param {Point3d} translation A 3D point with parameters x, y, z This is
* the translation of the point, seen from the
* camera.
* @returns {Point2d} point2d A 2D point with parameters x, y
*/
Graph3d.prototype._convertTranslationToScreen = function(translation) {
var ex = this.eye.x,
ey = this.eye.y,
ez = this.eye.z,
dx = translation.x,
dy = translation.y,
dz = translation.z;
// calculate position on screen from translation
var bx;
var by;
if (this.showPerspective) {
bx = (dx - ex) * (ez / dz);
by = (dy - ey) * (ez / dz);
}
else {
bx = dx * -(ez / this.camera.getArmLength());
by = dy * -(ez / this.camera.getArmLength());
}
// shift and scale the point to the center of the screen
// use the width of the graph to scale both horizontally and vertically.
return new Point2d(
this.currentXCenter + bx * this.frame.canvas.clientWidth,
this.currentYCenter - by * this.frame.canvas.clientWidth);
};
/**
* Calculate the translations and screen positions of all points
*/
Graph3d.prototype._calcTranslations = function(points, sort) {
if (sort === undefined) {
sort = true;
}
for (var i = 0; i < points.length; i++) {
var point = points[i];
point.trans = this._convertPointToTranslation(point.point);
point.screen = this._convertTranslationToScreen(point.trans);
// calculate the translation of the point at the bottom (needed for sorting)
var transBottom = this._convertPointToTranslation(point.bottom);
point.dist = this.showPerspective ? transBottom.length() : -transBottom.z;
}
if (!sort) {
return;
}
// sort the points on depth of their (x,y) position (not on z)
var sortDepth = function (a, b) {
return b.dist - a.dist;
};
points.sort(sortDepth);
};
Graph3d.prototype.getNumberOfRows = function(data) {
return data.length;
}
Graph3d.prototype.getNumberOfColumns = function(data) {
var counter = 0;
for (var column in data[0]) {
if (data[0].hasOwnProperty(column)) {
counter++;
}
}
return counter;
}
Graph3d.prototype.getDistinctValues = function(data, column) {
var distinctValues = [];
for (var i = 0; i < data.length; i++) {
if (distinctValues.indexOf(data[i][column]) == -1) {
distinctValues.push(data[i][column]);
}
}
return distinctValues.sort(function(a,b) { return a - b; });
}
/**
* Determine the smallest difference between the values for given
* column in the passed data set.
*
* @returns {Number|null} Smallest difference value or
* null, if it can't be determined.
*/
Graph3d.prototype.getSmallestDifference = function(data, column) {
var values = this.getDistinctValues(data, column);
var diffs = [];
// Get all the distinct diffs
// Array values is assumed to be sorted here
var smallest_diff = null;
for (var i = 1; i < values.length; i++) {
var diff = values[i] - values[i - 1];
if (smallest_diff == null || smallest_diff > diff ) {
smallest_diff = diff;
}
}
return smallest_diff;
}
/**
* Get the absolute min/max values for the passed data column.
*
* @returns {Range} A Range instance with min/max members properly set.
*/
Graph3d.prototype.getColumnRange = function(data,column) {
var range = new Range();
// Adjust the range so that it covers all values in the passed data elements.
for (var i = 0; i < data.length; i++) {
var item = data[i][column];
range.adjust(item);
}
return range;
};
/**
* Check if the state is consistent for the use of the value field.
*
* Throws if a problem is detected.
*/
Graph3d.prototype._checkValueField = function (data) {
var hasValueField = this.style === Graph3d.STYLE.BARCOLOR
|| this.style === Graph3d.STYLE.BARSIZE
|| this.style === Graph3d.STYLE.DOTCOLOR
|| this.style === Graph3d.STYLE.DOTSIZE;
if (!hasValueField) {
return; // No need to check further
}
// Following field must be present for the current graph style
if (this.colValue === undefined) {
throw new Error('Expected data to have '
+ ' field \'style\' '
+ ' for graph style \'' + this.style + '\''
);
}
// The data must also contain this field.
// Note that only first data element is checked.
if (data[0][this.colValue] === undefined) {
throw new Error('Expected data to have '
+ ' field \'' + this.colValue + '\' '
+ ' for graph style \'' + this.style + '\''
);
}
};
/**
* Set default values for range
*
* The default values override the range values, if defined.
*
* Because it's possible that only defaultMin or defaultMax is set, it's better
* to pass in a range already set with the min/max set from the data. Otherwise,
* it's quite hard to process the min/max properly.
*/
Graph3d.prototype._setRangeDefaults = function (range, defaultMin, defaultMax) {
if (defaultMin !== undefined) {
range.min = defaultMin;
}
if (defaultMax !== undefined) {
range.max = defaultMax;
}
// This is the original way that the default min/max values were adjusted.
// TODO: Perhaps it's better if an error is thrown if the values do not agree.
// But this will change the behaviour.
if (range.max <= range.min) range.max = range.min + 1;
};
/**
* Initialize the data from the data table. Calculate minimum and maximum values
* and column index values
* @param {Array | DataSet | DataView} rawData The data containing the items for
* the Graph.
* @param {Number} style Style Number
*/
Graph3d.prototype._dataInitialize = function (rawData, style) {
var me = this;
// unsubscribe from the dataTable
if (this.dataSet) {
this.dataSet.off('*', this._onChange);
}
if (rawData === undefined)
return;
if (Array.isArray(rawData)) {
rawData = new DataSet(rawData);
}
var data;
if (rawData instanceof DataSet || rawData instanceof DataView) {
data = rawData.get();
}
else {
throw new Error('Array, DataSet, or DataView expected');
}
if (data.length == 0)
return;
this.dataSet = rawData;
this.dataTable = data;
// subscribe to changes in the dataset
this._onChange = function () {
me.setData(me.dataSet);
};
this.dataSet.on('*', this._onChange);
// determine the location of x,y,z,value,filter columns
this.colX = 'x';
this.colY = 'y';
this.colZ = 'z';
var withBars = this.style == Graph3d.STYLE.BAR ||
this.style == Graph3d.STYLE.BARCOLOR ||
this.style == Graph3d.STYLE.BARSIZE;
// determine barWidth from data
if (withBars) {
if (this.defaultXBarWidth !== undefined) {
this.xBarWidth = this.defaultXBarWidth;
}
else {
this.xBarWidth = this.getSmallestDifference(data, this.colX) || 1;
}
if (this.defaultYBarWidth !== undefined) {
this.yBarWidth = this.defaultYBarWidth;
}
else {
this.yBarWidth = this.getSmallestDifference(data, this.colY) || 1;
}
}
// calculate minimums and maximums
var NUMSTEPS = 5;
var xRange = this.getColumnRange(data, this.colX);
if (withBars) {
xRange.expand(this.xBarWidth / 2);
}
this._setRangeDefaults(xRange, this.defaultXMin, this.defaultXMax);
this.xRange = xRange;
this.xStep = (this.defaultXStep !== undefined) ? this.defaultXStep : xRange.range()/NUMSTEPS;
var yRange = this.getColumnRange(data, this.colY);
if (withBars) {
yRange.expand(this.yBarWidth / 2);
}
this._setRangeDefaults(yRange, this.defaultYMin, this.defaultYMax);
this.yRange = yRange;
this.yStep = (this.defaultYStep !== undefined) ? this.defaultYStep : yRange.range()/NUMSTEPS;
var zRange = this.getColumnRange(data, this.colZ);
this._setRangeDefaults(zRange, this.defaultZMin, this.defaultZMax);
this.zRange = zRange;
this.zStep = (this.defaultZStep !== undefined) ? this.defaultZStep : zRange.range()/NUMSTEPS;
if (data[0].hasOwnProperty('style')) {
this.colValue = 'style';
var valueRange = this.getColumnRange(data,this.colValue);
this._setRangeDefaults(valueRange, this.defaultValueMin, this.defaultValueMax);
this.valueRange = valueRange;
}
// check if a filter column is provided
// Needs to be started after zRange is defined
if (data[0].hasOwnProperty('filter')) {
// Only set this field if it's actually present
this.colFilter = 'filter';
if (this.dataFilter === undefined) {
this.dataFilter = new Filter(rawData, this.colFilter, this);
this.dataFilter.setOnLoadCallback(function() {me.redraw();});
}
}
// set the scale dependent on the ranges.
this._setScale();
};
/**
* Filter the data based on the current filter
*
* @param {Array} data
* @returns {Array} dataPoints Array with point objects which can be drawn on
* screen
*/
Graph3d.prototype._getDataPoints = function (data) {
// TODO: store the created matrix dataPoints in the filters instead of
// reloading each time.
var x, y, i, z, obj, point;
var dataPoints = [];
if (this.style === Graph3d.STYLE.GRID ||
this.style === Graph3d.STYLE.SURFACE) {
// copy all values from the google data table to a matrix
// the provided values are supposed to form a grid of (x,y) positions
// create two lists with all present x and y values
var dataX = [];
var dataY = [];
for (i = 0; i < this.getNumberOfRows(data); i++) {
x = data[i][this.colX] || 0;
y = data[i][this.colY] || 0;
if (dataX.indexOf(x) === -1) {
dataX.push(x);
}
if (dataY.indexOf(y) === -1) {
dataY.push(y);
}
}
var sortNumber = function (a, b) {
return a - b;
};
dataX.sort(sortNumber);
dataY.sort(sortNumber);
// create a grid, a 2d matrix, with all values.
var dataMatrix = []; // temporary data matrix
for (i = 0; i < data.length; i++) {
x = data[i][this.colX] || 0;
y = data[i][this.colY] || 0;
z = data[i][this.colZ] || 0;
// TODO: implement Array().indexOf() for Internet Explorer
var xIndex = dataX.indexOf(x);
var yIndex = dataY.indexOf(y);
if (dataMatrix[xIndex] === undefined) {
dataMatrix[xIndex] = [];
}
var point3d = new Point3d();
point3d.x = x;
point3d.y = y;
point3d.z = z;
point3d.data = data[i];
obj = {};
obj.point = point3d;
obj.trans = undefined;
obj.screen = undefined;
obj.bottom = new Point3d(x, y, this.zRange.min);
dataMatrix[xIndex][yIndex] = obj;
dataPoints.push(obj);
}
// fill in the pointers to the neighbors.
for (x = 0; x < dataMatrix.length; x++) {
for (y = 0; y < dataMatrix[x].length; y++) {
if (dataMatrix[x][y]) {
dataMatrix[x][y].pointRight = (x < dataMatrix.length-1) ? dataMatrix[x+1][y] : undefined;
dataMatrix[x][y].pointTop = (y < dataMatrix[x].length-1) ? dataMatrix[x][y+1] : undefined;
dataMatrix[x][y].pointCross =
(x < dataMatrix.length-1 && y < dataMatrix[x].length-1) ?
dataMatrix[x+1][y+1] :
undefined;
}
}
}
}
else { // 'dot', 'dot-line', etc.
this._checkValueField(data);
// copy all values from the google data table to a list with Point3d objects
for (i = 0; i < data.length; i++) {
point = new Point3d();
point.x = data[i][this.colX] || 0;
point.y = data[i][this.colY] || 0;
point.z = data[i][this.colZ] || 0;
point.data = data[i];
if (this.colValue !== undefined) {
point.value = data[i][this.colValue] || 0;
}
obj = {};
obj.point = point;
obj.bottom = new Point3d(point.x, point.y, this.zRange.min);
obj.trans = undefined;
obj.screen = undefined;
if (this.style === Graph3d.STYLE.LINE) {
if (i > 0) {
// Add next point for line drawing
dataPoints[i - 1].pointNext = obj;
}
}
dataPoints.push(obj);
}
}
return dataPoints;
};
/**
* Create the main frame for the Graph3d.
*
* This function is executed once when a Graph3d object is created. The frame
* contains a canvas, and this canvas contains all objects like the axis and
* nodes.
*/
Graph3d.prototype.create = function () {
// remove all elements from the container element.
while (this.containerElement.hasChildNodes()) {
this.containerElement.removeChild(this.containerElement.firstChild);
}
this.frame = document.createElement('div');
this.frame.style.position = 'relative';
this.frame.style.overflow = 'hidden';
// create the graph canvas (HTML canvas element)
this.frame.canvas = document.createElement( 'canvas' );
this.frame.canvas.style.position = 'relative';
this.frame.appendChild(this.frame.canvas);
//if (!this.frame.canvas.getContext) {
{
var noCanvas = document.createElement( 'DIV' );
noCanvas.style.color = 'red';
noCanvas.style.fontWeight = 'bold' ;
noCanvas.style.padding = '10px';
noCanvas.innerHTML = 'Error: your browser does not support HTML canvas';
this.frame.canvas.appendChild(noCanvas);
}
this.frame.filter = document.createElement( 'div' );
this.frame.filter.style.position = 'absolute';
this.frame.filter.style.bottom = '0px';
this.frame.filter.style.left = '0px';
this.frame.filter.style.width = '100%';
this.frame.appendChild(this.frame.filter);
// add event listeners to handle moving and zooming the contents
var me = this;
var onmousedown = function (event) {me._onMouseDown(event);};
var ontouchstart = function (event) {me._onTouchStart(event);};
var onmousewheel = function (event) {me._onWheel(event);};
var ontooltip = function (event) {me._onTooltip(event);};
var onclick = function(event) {me._onClick(event);};
// TODO: these events are never cleaned up... can give a 'memory leakage'
util.addEventListener(this.frame.canvas, 'mousedown', onmousedown);
util.addEventListener(this.frame.canvas, 'touchstart', ontouchstart);
util.addEventListener(this.frame.canvas, 'mousewheel', onmousewheel);
util.addEventListener(this.frame.canvas, 'mousemove', ontooltip);
util.addEventListener(this.frame.canvas, 'click', onclick);
// add the new graph to the container element
this.containerElement.appendChild(this.frame);
};
/**
* Set a new size for the graph
*/
Graph3d.prototype._setSize = function(width, height) {
this.frame.style.width = width;
this.frame.style.height = height;
this._resizeCanvas();
};
/**
* Resize the canvas to the current size of the frame
*/
Graph3d.prototype._resizeCanvas = function() {
this.frame.canvas.style.width = '100%';
this.frame.canvas.style.height = '100%';
this.frame.canvas.width = this.frame.canvas.clientWidth;
this.frame.canvas.height = this.frame.canvas.clientHeight;
// adjust with for margin
this.frame.filter.style.width = (this.frame.canvas.clientWidth - 2 * 10) + 'px';
};
/**
* Start animation
*/
Graph3d.prototype.animationStart = function() {
if (!this.frame.filter || !this.frame.filter.slider)
throw new Error('No animation available');
this.frame.filter.slider.play();
};
/**
* Stop animation
*/
Graph3d.prototype.animationStop = function() {
if (!this.frame.filter || !this.frame.filter.slider) return;
this.frame.filter.slider.stop();
};
/**
* Resize the center position based on the current values in this.xCenter
* and this.yCenter (which are strings with a percentage or a value
* in pixels). The center positions are the variables this.currentXCenter
* and this.currentYCenter
*/
Graph3d.prototype._resizeCenter = function() {
// calculate the horizontal center position
if (this.xCenter.charAt(this.xCenter.length-1) === '%') {
this.currentXCenter =
parseFloat(this.xCenter) / 100 *
this.frame.canvas.clientWidth;
}
else {
this.currentXCenter = parseFloat(this.xCenter); // supposed to be in px
}
// calculate the vertical center position
if (this.yCenter.charAt(this.yCenter.length-1) === '%') {
this.currentYCenter =
parseFloat(this.yCenter) / 100 *
(this.frame.canvas.clientHeight - this.frame.filter.clientHeight);
}
else {
this.currentYCenter = parseFloat(this.yCenter); // supposed to be in px
}
};
/**
* Retrieve the current camera rotation
*
* @returns {object} An object with parameters horizontal, vertical, and
* distance
*/
Graph3d.prototype.getCameraPosition = function() {
var pos = this.camera.getArmRotation();
pos.distance = this.camera.getArmLength();
return pos;
};
/**
* Load data into the 3D Graph
*/
Graph3d.prototype._readData = function(data) {
// read the data
this._dataInitialize(data, this.style);
if (this.dataFilter) {
// apply filtering
this.dataPoints = this.dataFilter._getDataPoints();
}
else {
// no filtering. load all data
this.dataPoints = this._getDataPoints(this.dataTable);
}
// draw the filter
this._redrawFilter();
};
/**
* Replace the dataset of the Graph3d
*
* @param {Array | DataSet | DataView} data
*/
Graph3d.prototype.setData = function (data) {
this._readData(data);
this.redraw();
// start animation when option is true
if (this.animationAutoStart && this.dataFilter) {
this.animationStart();
}
};
/**
* Update the options. Options will be merged with current options
*
* @param {Object} options
*/
Graph3d.prototype.setOptions = function (options) {
var cameraPosition = undefined;
this.animationStop();
Settings.setOptions(options, this);
this.setPointDrawingMethod();
this._setSize(this.width, this.height);
// re-load the data
if (this.dataTable) {
this.setData(this.dataTable);
}
// start animation when option is true
if (this.animationAutoStart && this.dataFilter) {
this.animationStart();
}
};
/**
* Determine which point drawing method to use for the current graph style.
*/
Graph3d.prototype.setPointDrawingMethod = function() {
var method = undefined;
switch (this.style) {
case Graph3d.STYLE.BAR:
method = Graph3d.prototype._redrawBarGraphPoint;
break;
case Graph3d.STYLE.BARCOLOR:
method = Graph3d.prototype._redrawBarColorGraphPoint;
break;
case Graph3d.STYLE.BARSIZE:
method = Graph3d.prototype._redrawBarSizeGraphPoint;
break;
case Graph3d.STYLE.DOT:
method = Graph3d.prototype._redrawDotGraphPoint;
break;
case Graph3d.STYLE.DOTLINE:
method = Graph3d.prototype._redrawDotLineGraphPoint;
break;
case Graph3d.STYLE.DOTCOLOR:
method = Graph3d.prototype._redrawDotColorGraphPoint;
break;
case Graph3d.STYLE.DOTSIZE:
method = Graph3d.prototype._redrawDotSizeGraphPoint;
break;
case Graph3d.STYLE.SURFACE:
method = Graph3d.prototype._redrawSurfaceGraphPoint;
break;
case Graph3d.STYLE.GRID:
method = Graph3d.prototype._redrawGridGraphPoint;
break;
case Graph3d.STYLE.LINE:
method = Graph3d.prototype._redrawLineGraphPoint;
break;
default:
throw new Error('Can not determine point drawing method '
+ 'for graph style \'' + this.style + '\'');
}
this._pointDrawingMethod = method;
};
/**
* Redraw the Graph.
*/
Graph3d.prototype.redraw = function() {
if (this.dataPoints === undefined) {
throw new Error('Graph data not initialized');
}
this._resizeCanvas();
this._resizeCenter();
this._redrawSlider();
this._redrawClear();
this._redrawAxis();
this._redrawDataGraph();
this._redrawInfo();
this._redrawLegend();
};
/**
* Get drawing context without exposing canvas
*/
Graph3d.prototype._getContext = function() {
var canvas = this.frame.canvas;
var ctx = canvas.getContext('2d');
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
return ctx;
};
/**
* Clear the canvas before redrawing
*/
Graph3d.prototype._redrawClear = function() {
var canvas = this.frame.canvas;
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
};
Graph3d.prototype._dotSize = function() {
return this.frame.clientWidth * this.dotSizeRatio;
};
/**
* Get legend width
*/
Graph3d.prototype._getLegendWidth = function() {
var width;
if (this.style === Graph3d.STYLE.DOTSIZE) {
var dotSize = this._dotSize();
width = dotSize / 2 + dotSize * 2;
} else if (this.style === Graph3d.STYLE.BARSIZE) {
width = this.xBarWidth ;
} else {
width = 20;
}
return width;
}
/**
* Redraw the legend based on size, dot color, or surface height
*/
Graph3d.prototype._redrawLegend = function() {
//Return without drawing anything, if no legend is specified
if (this.showLegend !== true) {
return;
}
// Do not draw legend when graph style does not support
if (this.style === Graph3d.STYLE.LINE
|| this.style === Graph3d.STYLE.BARSIZE //TODO add legend support for BARSIZE
){
return;
}
// Legend types - size and color. Determine if size legend.
var isSizeLegend = (this.style === Graph3d.STYLE.BARSIZE
|| this.style === Graph3d.STYLE.DOTSIZE) ;
// Legend is either tracking z values or style values. This flag if false means use z values.
var isValueLegend = (this.style === Graph3d.STYLE.DOTSIZE
|| this.style === Graph3d.STYLE.DOTCOLOR
|| this.style === Graph3d.STYLE.BARCOLOR);
var height = Math.max(this.frame.clientHeight * 0.25, 100);
var top = this.margin;
var width = this._getLegendWidth() ; // px - overwritten by size legend
var right = this.frame.clientWidth - this.margin;
var left = right - width;
var bottom = top + height;
var ctx = this._getContext();
ctx.lineWidth = 1;
ctx.font = '14px arial'; // TODO: put in options
if (isSizeLegend === false) {
// draw the color bar
var ymin = 0;
var ymax = height; // Todo: make height customizable
var y;
for (y = ymin; y < ymax; y++) {
var f = (y - ymin) / (ymax - ymin);
var hue = f * 240;
var color = this._hsv2rgb(hue, 1, 1);
ctx.strokeStyle = color;
ctx.beginPath();
ctx.moveTo(left, top + y);
ctx.lineTo(right, top + y);
ctx.stroke();
}
ctx.strokeStyle = this.axisColor;
ctx.strokeRect(left, top, width, height);
} else {
// draw the size legend box
var widthMin;
if (this.style === Graph3d.STYLE.DOTSIZE) {
var dotSize = this._dotSize();
widthMin = dotSize / 2; // px
} else if (this.style === Graph3d.STYLE.BARSIZE) {
//widthMin = this.xBarWidth * 0.2 this is wrong - barwidth measures in terms of xvalues
}
ctx.strokeStyle = this.axisColor;
ctx.fillStyle = this.dataColor.fill;
ctx.beginPath();
ctx.moveTo(left, top);
ctx.lineTo(right, top);
ctx.lineTo(right - width + widthMin, bottom);
ctx.lineTo(left, bottom);
ctx.closePath();
ctx.fill();
ctx.stroke();
}
// print value text along the legend edge
var gridLineLen = 5; // px
var legendMin = isValueLegend ? this.valueRange.min : this.zRange.min;
var legendMax = isValueLegend ? this.valueRange.max : this.zRange.max;
var step = new StepNumber(legendMin, legendMax, (legendMax-legendMin)/5, true);
step.start(true);
var y;
var from;
var to;
while (!step.end()) {
y = bottom - (step.getCurrent() - legendMin) / (legendMax - legendMin) * height;
from = new Point2d(left - gridLineLen, y);
to = new Point2d(left, y);
this._line(ctx, from, to);
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.axisColor;
ctx.fillText(step.getCurrent(), left - 2 * gridLineLen, y);
step.next();
}
ctx.textAlign = 'right';
ctx.textBaseline = 'top';
var label = this.legendLabel;
ctx.fillText(label, right, bottom + this.margin);
};
/**
* Redraw the filter
*/
Graph3d.prototype._redrawFilter = function() {
this.frame.filter.innerHTML = '';
if (this.dataFilter) {
var options = {
'visible': this.showAnimationControls
};
var slider = new Slider(this.frame.filter, options);
this.frame.filter.slider = slider;
// TODO: css here is not nice here...
this.frame.filter.style.padding = '10px';
//this.frame.filter.style.backgroundColor = '#EFEFEF';
slider.setValues(this.dataFilter.values);
slider.setPlayInterval(this.animationInterval);
// create an event handler
var me = this;
var onchange = function () {
var index = slider.getIndex();
me.dataFilter.selectValue(index);
me.dataPoints = me.dataFilter._getDataPoints();
me.redraw();
};
slider.setOnChangeCallback(onchange);
}
else {
this.frame.filter.slider = undefined;
}
};
/**
* Redraw the slider
*/
Graph3d.prototype._redrawSlider = function() {
if ( this.frame.filter.slider !== undefined) {
this.frame.filter.slider.redraw();
}
};
/**
* Redraw common information
*/
Graph3d.prototype._redrawInfo = function() {
if (this.dataFilter) {
var ctx = this._getContext();
ctx.font = '14px arial'; // TODO: put in options
ctx.lineStyle = 'gray';
ctx.fillStyle = 'gray';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
var x = this.margin;
var y = this.margin;
ctx.fillText(this.dataFilter.getLabel() + ': ' + this.dataFilter.getSelectedValue(), x, y);
}
};
/**
* Draw a line between 2d points 'from' and 'to'.
*
* If stroke style specified, set that as well.
*/
Graph3d.prototype._line = function(ctx, from, to, strokeStyle) {
if (strokeStyle !== undefined) {
ctx.strokeStyle = strokeStyle;
}
ctx.beginPath();
ctx.moveTo(from.x, from.y);
ctx.lineTo(to.x , to.y );
ctx.stroke();
}
Graph3d.prototype.drawAxisLabelX = function(ctx, point3d, text, armAngle, yMargin) {
if (yMargin === undefined) {
yMargin = 0;
}
var point2d = this._convert3Dto2D(point3d);
if (Math.cos(armAngle * 2) > 0) {
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
point2d.y += yMargin;
}
else if (Math.sin(armAngle * 2) < 0){
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
}
else {
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.axisColor;
ctx.fillText(text, point2d.x, point2d.y);
}
Graph3d.prototype.drawAxisLabelY = function(ctx, point3d, text, armAngle, yMargin) {
if (yMargin === undefined) {
yMargin = 0;
}
var point2d = this._convert3Dto2D(point3d);
if (Math.cos(armAngle * 2) < 0) {
ctx.textAlign = 'center';
ctx.textBaseline = 'top';
point2d.y += yMargin;
}
else if (Math.sin(armAngle * 2) > 0){
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
}
else {
ctx.textAlign = 'left';
ctx.textBaseline = 'middle';
}
ctx.fillStyle = this.axisColor;
ctx.fillText(text, point2d.x, point2d.y);
}
Graph3d.prototype.drawAxisLabelZ = function(ctx, point3d, text, offset) {
if (offset === undefined) {
offset = 0;
}
var point2d = this._convert3Dto2D(point3d);
ctx.textAlign = 'right';
ctx.textBaseline = 'middle';
ctx.fillStyle = this.axisColor;
ctx.fillText(text, point2d.x - offset, point2d.y);
};
/**
/**
* Draw a line between 2d points 'from' and 'to'.
*
* If stroke style specified, set that as well.
*/
Graph3d.prototype._line3d = function(ctx, from, to, strokeStyle) {
var from2d = this._convert3Dto2D(from);
var to2d = this._convert3Dto2D(to);
this._line(ctx, from2d, to2d, strokeStyle);
}
/**
* Redraw the axis
*/
Graph3d.prototype._redrawAxis = function() {
var ctx = this._getContext(),
from, to, step, prettyStep,
text, xText, yText, zText,
offset, xOffset, yOffset;
// TODO: get the actual rendered style of the containerElement
//ctx.font = this.containerElement.style.font;
ctx.font = 24 / this.camera.getArmLength() + 'px arial';
// calculate the length for the short grid lines
var gridLenX = 0.025 / this.scale.x;
var gridLenY = 0.025 / this.scale.y;
var textMargin = 5 / this.camera.getArmLength(); // px
var armAngle = this.camera.getArmRotation().horizontal;
var armVector = new Point2d(Math.cos(armAngle), Math.sin(armAngle));
var xRange = this.xRange;
var yRange = this.yRange;
var zRange = this.zRange;
// draw x-grid lines
ctx.lineWidth = 1;
prettyStep = (this.defaultXStep === undefined);
step = new StepNumber(xRange.min, xRange.max, this.xStep, prettyStep);
step.start(true);
while (!step.end()) {
var x = step.getCurrent();
if (this.showGrid) {
from = new Point3d(x, yRange.min, zRange.min);
to = new Point3d(x, yRange.max, zRange.min);
this._line3d(ctx, from, to, this.gridColor);
}
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);
from = new Point3d(x, yRange.max, zRange.min);
to = new Point3d(x, yRange.max-gridLenX, zRange.min);
this._line3d(ctx, from, to, this.axisColor);
}
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();
}
// draw y-grid lines
ctx.lineWidth = 1;
prettyStep = (this.defaultYStep === undefined);
step = new StepNumber(yRange.min, yRange.max, this.yStep, prettyStep);
step.start(true);
while (!step.end()) {
var y = step.getCurrent();
if (this.showGrid) {
from = new Point3d(xRange.min, y, zRange.min);
to = new Point3d(xRange.max, y, zRange.min);
this._line3d(ctx, from, to, this.gridColor);
}
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);
from = new Point3d(xRange.max, y, zRange.min);
to = new Point3d(xRange.max-gridLenY, y, zRange.min);
this._line3d(ctx, from, to, this.axisColor);
}
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
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;
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);
var msg = this.zValueLabel(z) + ' ';
this.drawAxisLabelZ(ctx, from3d, msg, 5);
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);
}
// draw x-axis
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);
}
// draw y-axis
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 && 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;
text = new Point3d(xText, yText, zRange.min);
this.drawAxisLabelX(ctx, text, xLabel, armAngle);
}
// draw y-label
var yLabel = this.yLabel;
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;
text = new Point3d(xText, yText, zRange.min);
this.drawAxisLabelY(ctx, text, yLabel, armAngle);
}
// draw z-label
var zLabel = this.zLabel;
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;
zText = (zRange.max + 3*zRange.min)/4;
text = new Point3d(xText, yText, zText);
this.drawAxisLabelZ(ctx, text, zLabel, offset);
}
};
/**
* Calculate the color based on the given value.
* @param {Number} H Hue, a value be between 0 and 360
* @param {Number} S Saturation, a value between 0 and 1
* @param {Number} V Value, a value between 0 and 1
*/
Graph3d.prototype._hsv2rgb = function(H, S, V) {
var R, G, B, C, Hi, X;
C = V * S;
Hi = Math.floor(H/60); // hi = 0,1,2,3,4,5
X = C * (1 - Math.abs(((H/60) % 2) - 1));
switch (Hi) {
case 0: R = C; G = X; B = 0; break;
case 1: R = X; G = C; B = 0; break;
case 2: R = 0; G = C; B = X; break;
case 3: R = 0; G = X; B = C; break;
case 4: R = X; G = 0; B = C; break;
case 5: R = C; G = 0; B = X; break;
default: R = 0; G = 0; B = 0; break;
}
return 'RGB(' + parseInt(R*255) + ',' + parseInt(G*255) + ',' + parseInt(B*255) + ')';
};
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;
};
// -----------------------------------------------------------------------------
// Drawing primitives for the graphs
// -----------------------------------------------------------------------------
/**
* Draw a bar element in the view with the given properties.
*/
Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borderColor) {
var i, j, surface;
// calculate all corner points
var me = this;
var point3d = point.point;
var zMin = this.zRange.min;
var top = [
{point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, point3d.z)},
{point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, point3d.z)},
{point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, point3d.z)},
{point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, point3d.z)}
];
var bottom = [
{point: new Point3d(point3d.x - xWidth, point3d.y - yWidth, zMin)},
{point: new Point3d(point3d.x + xWidth, point3d.y - yWidth, zMin)},
{point: new Point3d(point3d.x + xWidth, point3d.y + yWidth, zMin)},
{point: new Point3d(point3d.x - xWidth, point3d.y + yWidth, zMin)}
];
// calculate screen location of the points
top.forEach(function (obj) {
obj.screen = me._convert3Dto2D(obj.point);
});
bottom.forEach(function (obj) {
obj.screen = me._convert3Dto2D(obj.point);
});
// create five sides, calculate both corner points and center points
var surfaces = [
{corners: top, center: Point3d.avg(bottom[0].point, bottom[2].point)},
{corners: [top[0], top[1], bottom[1], bottom[0]], center: Point3d.avg(bottom[1].point, bottom[0].point)},
{corners: [top[1], top[2], bottom[2], bottom[1]], center: Point3d.avg(bottom[2].point, bottom[1].point)},
{corners: [top[2], top[3], bottom[3], bottom[2]], center: Point3d.avg(bottom[3].point, bottom[2].point)},
{corners: [top[3], top[0], bottom[0], bottom[3]], center: Point3d.avg(bottom[0].point, bottom[3].point)}
];
point.surfaces = surfaces;
// calculate the distance of each of the surface centers to the camera
for (j = 0; j < surfaces.length; j++) {
surface = surfaces[j];
var transCenter = this._convertPointToTranslation(surface.center);
surface.dist = this.showPerspective ? transCenter.length() : -transCenter.z;
// TODO: this dept calculation doesn't work 100% of the cases due to perspective,
// but the current solution is fast/simple and works in 99.9% of all cases
// the issue is visible in example 14, with graph.setCameraPosition({horizontal: 2.97, vertical: 0.5, distance: 0.9})
}
// order the surfaces by their (translated) depth
surfaces.sort(function (a, b) {
var diff = b.dist - a.dist;
if (diff) return diff;
// if equal depth, sort the top surface last
if (a.corners === top) return 1;
if (b.corners === top) return -1;
// both are equal
return 0;
});
// draw the ordered surfaces
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
for (j = 2; j < surfaces.length; j++) {
surface = surfaces[j];
this._polygon(ctx, surface.corners);
}
};
/**
* Draw a polygon using the passed points and fill it with the passed style and stroke.
*
* @param points an array of points.
* @param fillStyle optional; the fill style to set
* @param strokeStyle optional; the stroke style to set
*/
Graph3d.prototype._polygon = function(ctx, points, fillStyle, strokeStyle) {
if (points.length < 2) {
return;
}
if (fillStyle !== undefined) {
ctx.fillStyle = fillStyle;
}
if (strokeStyle !== undefined) {
ctx.strokeStyle = strokeStyle;
}
ctx.beginPath();
ctx.moveTo(points[0].screen.x, points[0].screen.y);
for (var i = 1; i < points.length; ++i) {
var point = points[i];
ctx.lineTo(point.screen.x, point.screen.y);
}
ctx.closePath();
ctx.fill();
ctx.stroke(); // TODO: only draw stroke when strokeWidth > 0
};
/**
* @param size optional; if not specified use value from 'this._dotSize()`
*/
Graph3d.prototype._drawCircle = function(ctx, point, color, borderColor, size) {
var radius = this._calcRadius(point, size);
ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = borderColor;
ctx.fillStyle = color;
ctx.beginPath();
ctx.arc(point.screen.x, point.screen.y, radius, 0, Math.PI*2, true);
ctx.fill();
ctx.stroke();
};
/**
* Determine the colors for the 'regular' graph styles.
*/
Graph3d.prototype._getColorsRegular = function(point) {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
var hue = (1 - (point.point.z - this.zRange.min) * this.scale.z / this.verticalRatio) * 240;
var color = this._hsv2rgb(hue, 1, 1);
var borderColor = this._hsv2rgb(hue, 1, 0.8);
return {
fill : color,
border: borderColor
};
};
/**
* Get the colors for the 'color' graph styles.
* These styles are currently: 'bar-color' and 'dot-color'
* Color may be set as a string representation of HTML color, like #ff00ff,
* or calculated from a number, for example, distance from this point
* The first option is useful when we have some pre-given legend, to which we have to adjust ourselves
* The second option is useful when we are interested in automatically setting the color, from some value,
* using some color scale
*/
Graph3d.prototype._getColorsColor = function(point) {
// calculate the color based on the value
var color, borderColor;
if (typeof point.point.value === "string") {
color = point.point.value;
borderColor = point.point.value;
}
else {
var hue = (1 - (point.point.value - this.valueRange.min) * this.scale.value) * 240;
color = this._hsv2rgb(hue, 1, 1);
borderColor = this._hsv2rgb(hue, 1, 0.8);
}
return {
fill : color,
border : borderColor
};
};
/**
* Get the colors for the 'size' graph styles.
* These styles are currently: 'bar-size' and 'dot-size'
*/
Graph3d.prototype._getColorsSize = function() {
return {
fill : this.dataColor.fill,
border : this.dataColor.stroke
};
};
/**
* Determine the size of a point on-screen, as determined by the
* distance to the camera.
*
* @param size the size that needs to be translated to screen coordinates.
* optional; if not passed, use the default point size.
*/
Graph3d.prototype._calcRadius = function(point, size) {
if (size === undefined) {
size = this._dotSize();
}
var radius;
if (this.showPerspective) {
radius = size / -point.trans.z;
}
else {
radius = size * -(this.eye.z / this.camera.getArmLength());
}
if (radius < 0) {
radius = 0;
}
return radius;
};
// -----------------------------------------------------------------------------
// Methods for drawing points per graph style.
// -----------------------------------------------------------------------------
/**
* Draw single datapoint for graph style 'bar'.
*/
Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2;
var colors = this._getColorsRegular(point);
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};
/**
* Draw single datapoint for graph style 'bar-color'.
*/
Graph3d.prototype._redrawBarColorGraphPoint = function(ctx, point) {
var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2;
var colors = this._getColorsColor(point);
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};
/**
* Draw single datapoint for graph style 'bar-size'.
*/
Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
// calculate size for the bar
var fraction = (point.point.value - this.valueRange.min) / this.valueRange.range();
var xWidth = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
var yWidth = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);
var colors = this._getColorsSize();
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};
/**
* Draw single datapoint for graph style 'dot'.
*/
Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) {
var colors = this._getColorsRegular(point);
this._drawCircle(ctx, point, colors.fill, colors.border);
};
/**
* Draw single datapoint for graph style 'dot-line'.
*/
Graph3d.prototype._redrawDotLineGraphPoint = function(ctx, point) {
// draw a vertical line from the XY-plane to the graph value
var from = this._convert3Dto2D(point.bottom);
ctx.lineWidth = 1;
this._line(ctx, from, point.screen, this.gridColor);
this._redrawDotGraphPoint(ctx, point);
};
/**
* Draw single datapoint for graph style 'dot-color'.
*/
Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) {
var colors = this._getColorsColor(point);
this._drawCircle(ctx, point, colors.fill, colors.border);
};
/**
* Draw single datapoint for graph style 'dot-size'.
*/
Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) {
var dotSize = this._dotSize();
var fraction = (point.point.value - this.valueRange.min) / this.valueRange.range();
var size = dotSize/2 + 2*dotSize * fraction;
var colors = this._getColorsSize();
this._drawCircle(ctx, point, colors.fill, colors.border, size);
};
/**
* Draw single datapoint for graph style 'surface'.
*/
Graph3d.prototype._redrawSurfaceGraphPoint = function(ctx, point) {
var right = point.pointRight;
var top = point.pointTop;
var cross = point.pointCross;
if (point === undefined || right === undefined || top === undefined || cross === undefined) {
return;
}
var topSideVisible = true;
var fillStyle;
var strokeStyle;
var lineWidth;
if (this.showGrayBottom || this.showShadow) {
// calculate the cross product of the two vectors from center
// to left and right, in order to know whether we are looking at the
// bottom or at the top side. We can also use the cross product
// for calculating light intensity
var aDiff = Point3d.subtract(cross.trans, point.trans);
var bDiff = Point3d.subtract(top.trans, right.trans);
var crossproduct = Point3d.crossProduct(aDiff, bDiff);
var len = crossproduct.length();
// FIXME: there is a bug with determining the surface side (shadow or colored)
topSideVisible = (crossproduct.z > 0);
}
if (topSideVisible) {
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
var zAvg = (point.point.z + right.point.z + top.point.z + cross.point.z) / 4;
var h = (1 - (zAvg - this.zRange.min) * this.scale.z / this.verticalRatio) * 240;
var s = 1; // saturation
var v;
if (this.showShadow) {
v = Math.min(1 + (crossproduct.x / len) / 2, 1); // value. TODO: scale
fillStyle = this._hsv2rgb(h, s, v);
strokeStyle = fillStyle;
}
else {
v = 1;
fillStyle = this._hsv2rgb(h, s, v);
strokeStyle = this.axisColor; // TODO: should be customizable
}
}
else {
fillStyle = 'gray';
strokeStyle = this.axisColor;
}
ctx.lineWidth = this._getStrokeWidth(point);
// TODO: only draw stroke when strokeWidth > 0
var points = [point, right, cross, top];
this._polygon(ctx, points, fillStyle, strokeStyle);
};
/**
* Helper method for _redrawGridGraphPoint()
*/
Graph3d.prototype._drawGridLine = function(ctx, from, to) {
if (from === undefined || to === undefined) {
return;
}
// calculate Hue from the current value. At zMin the hue is 240, at zMax the hue is 0
var zAvg = (from.point.z + to.point.z) / 2;
var h = (1 - (zAvg - this.zRange.min) * this.scale.z / this.verticalRatio) * 240;
ctx.lineWidth = this._getStrokeWidth(from) * 2;
ctx.strokeStyle = this._hsv2rgb(h, 1, 1);
this._line(ctx, from.screen, to.screen);
};
/**
* Draw single datapoint for graph style 'Grid'.
*/
Graph3d.prototype._redrawGridGraphPoint = function(ctx, point) {
this._drawGridLine(ctx, point, point.pointRight);
this._drawGridLine(ctx, point, point.pointTop);
};
/**
* Draw single datapoint for graph style 'line'.
*/
Graph3d.prototype._redrawLineGraphPoint = function(ctx, point) {
if (point.pointNext === undefined) {
return;
}
ctx.lineWidth = this._getStrokeWidth(point);
ctx.strokeStyle = this.dataColor.stroke;
this._line(ctx, point.screen, point.pointNext.screen);
};
/**
* Draw all datapoints for currently selected graph style.
*
*/
Graph3d.prototype._redrawDataGraph = function() {
var ctx = this._getContext();
var i;
if (this.dataPoints === undefined || this.dataPoints.length <= 0)
return; // TODO: throw exception?
this._calcTranslations(this.dataPoints);
for (i = 0; i < this.dataPoints.length; i++) {
var point = this.dataPoints[i];
// Using call() ensures that the correct context is used
this._pointDrawingMethod.call(this, ctx, point);
}
};
// -----------------------------------------------------------------------------
// End methods for drawing points per graph style.
// -----------------------------------------------------------------------------
/**
* Store startX, startY and startOffset for mouse operations
*
* @param {Event} event The event that occurred
*/
Graph3d.prototype._storeMousePosition = function(event) {
// get mouse position (different code for IE and all other browsers)
this.startMouseX = getMouseX(event);
this.startMouseY = getMouseY(event);
this._startCameraOffset = this.camera.getOffset();
};
/**
* Start a moving operation inside the provided parent element
* @param {Event} event The event that occurred (required for
* retrieving the mouse position)
*/
Graph3d.prototype._onMouseDown = function(event) {
event = event || window.event;
// check if mouse is still down (may be up when focus is lost for example
// in an iframe)
if (this.leftButtonDown) {
this._onMouseUp(event);
}
// only react on left mouse button down
this.leftButtonDown = event.which ? (event.which === 1) : (event.button === 1);
if (!this.leftButtonDown && !this.touchDown) return;
this._storeMousePosition(event);
this.startStart = new Date(this.start);
this.startEnd = new Date(this.end);
this.startArmRotation = this.camera.getArmRotation();
this.frame.style.cursor = 'move';
// add event listeners to handle moving the contents
// we store the function onmousemove and onmouseup in the graph, so we can
// remove the eventlisteners lateron in the function mouseUp()
var me = this;
this.onmousemove = function (event) {me._onMouseMove(event);};
this.onmouseup = function (event) {me._onMouseUp(event);};
util.addEventListener(document, 'mousemove', me.onmousemove);
util.addEventListener(document, 'mouseup', me.onmouseup);
util.preventDefault(event);
};
/**
* Perform moving operating.
* This function activated from within the funcion Graph.mouseDown().
* @param {Event} event Well, eehh, the event
*/
Graph3d.prototype._onMouseMove = function (event) {
this.moving = true;
event = event || window.event;
// calculate change in mouse position
var diffX = parseFloat(getMouseX(event)) - this.startMouseX;
var diffY = parseFloat(getMouseY(event)) - this.startMouseY;
// move with ctrl or rotate by other
if (event && event.ctrlKey === true) {
// calculate change in mouse position
var scaleX = this.frame.clientWidth * 0.5;
var scaleY = this.frame.clientHeight * 0.5;
var offXNew = (this._startCameraOffset.x || 0) - ((diffX / scaleX) * this.camera.armLength) * 0.8;
var offYNew = (this._startCameraOffset.y || 0) + ((diffY / scaleY) * this.camera.armLength) * 0.8;
this.camera.setOffset(offXNew, offYNew);
this._storeMousePosition(event);
} else {
var horizontalNew = this.startArmRotation.horizontal + diffX / 200;
var verticalNew = this.startArmRotation.vertical + diffY / 200;
var snapAngle = 4; // degrees
var snapValue = Math.sin(snapAngle / 360 * 2 * Math.PI);
// snap horizontally to nice angles at 0pi, 0.5pi, 1pi, 1.5pi, etc...
// the -0.001 is to take care that the vertical axis is always drawn at the left front corner
if (Math.abs(Math.sin(horizontalNew)) < snapValue) {
horizontalNew = Math.round(horizontalNew / Math.PI) * Math.PI - 0.001;
}
if (Math.abs(Math.cos(horizontalNew)) < snapValue) {
horizontalNew = (Math.round(horizontalNew / Math.PI - 0.5) + 0.5) * Math.PI - 0.001;
}
// snap vertically to nice angles
if (Math.abs(Math.sin(verticalNew)) < snapValue) {
verticalNew = Math.round(verticalNew / Math.PI) * Math.PI;
}
if (Math.abs(Math.cos(verticalNew)) < snapValue) {
verticalNew = (Math.round(verticalNew / Math.PI - 0.5) + 0.5) * Math.PI;
}
this.camera.setArmRotation(horizontalNew, verticalNew);
}
this.redraw();
// fire a cameraPositionChange event
var parameters = this.getCameraPosition();
this.emit('cameraPositionChange', parameters);
util.preventDefault(event);
};
/**
* Stop moving operating.
* This function activated from within the funcion Graph.mouseDown().
* @param {event} event The event
*/
Graph3d.prototype._onMouseUp = function (event) {
this.frame.style.cursor = 'auto';
this.leftButtonDown = false;
// remove event listeners here
util.removeEventListener(document, 'mousemove', this.onmousemove);
util.removeEventListener(document, 'mouseup', this.onmouseup);
util.preventDefault(event);
};
/**
* @param {event} event The event
*/
Graph3d.prototype._onClick = function (event) {
if (!this.onclick_callback)
return;
if (!this.moving) {
var boundingRect = this.frame.getBoundingClientRect();
var mouseX = getMouseX(event) - boundingRect.left;
var mouseY = getMouseY(event) - boundingRect.top;
var dataPoint = this._dataPointFromXY(mouseX, mouseY);
if (dataPoint)
this.onclick_callback(dataPoint.point.data);
}
else { // disable onclick callback, if it came immediately after rotate/pan
this.moving = false;
}
util.preventDefault(event);
};
/**
* After having moved the mouse, a tooltip should pop up when the mouse is resting on a data point
* @param {Event} event A mouse move event
*/
Graph3d.prototype._onTooltip = function (event) {
var delay = 300; // ms
var boundingRect = this.frame.getBoundingClientRect();
var mouseX = getMouseX(event) - boundingRect.left;
var mouseY = getMouseY(event) - boundingRect.top;
if (!this.showTooltip) {
return;
}
if (this.tooltipTimeout) {
clearTimeout(this.tooltipTimeout);
}
// (delayed) display of a tooltip only if no mouse button is down
if (this.leftButtonDown) {
this._hideTooltip();
return;
}
if (this.tooltip && this.tooltip.dataPoint) {
// tooltip is currently visible
var dataPoint = this._dataPointFromXY(mouseX, mouseY);
if (dataPoint !== this.tooltip.dataPoint) {
// datapoint changed
if (dataPoint) {
this._showTooltip(dataPoint);
}
else {
this._hideTooltip();
}
}
}
else {
// tooltip is currently not visible
var me = this;
this.tooltipTimeout = setTimeout(function () {
me.tooltipTimeout = null;
// show a tooltip if we have a data point
var dataPoint = me._dataPointFromXY(mouseX, mouseY);
if (dataPoint) {
me._showTooltip(dataPoint);
}
}, delay);
}
};
/**
* Event handler for touchstart event on mobile devices
*/
Graph3d.prototype._onTouchStart = function(event) {
this.touchDown = true;
var me = this;
this.ontouchmove = function (event) {me._onTouchMove(event);};
this.ontouchend = function (event) {me._onTouchEnd(event);};
util.addEventListener(document, 'touchmove', me.ontouchmove);
util.addEventListener(document, 'touchend', me.ontouchend);
this._onMouseDown(event);
};
/**
* Event handler for touchmove event on mobile devices
*/
Graph3d.prototype._onTouchMove = function(event) {
this._onMouseMove(event);
};
/**
* Event handler for touchend event on mobile devices
*/
Graph3d.prototype._onTouchEnd = function(event) {
this.touchDown = false;
util.removeEventListener(document, 'touchmove', this.ontouchmove);
util.removeEventListener(document, 'touchend', this.ontouchend);
this._onMouseUp(event);
};
/**
* Event handler for mouse wheel event, used to zoom the graph
* Code from http://adomas.org/javascript-mouse-wheel/
* @param {event} event The event
*/
Graph3d.prototype._onWheel = function(event) {
if (!event) /* For IE. */
event = window.event;
// retrieve delta
var delta = 0;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /* Mozilla case. */
// In Mozilla, sign of delta is different than in IE.
// Also, delta is multiple of 3.
delta = -event.detail/3;
}
// If delta is nonzero, handle it.
// Basically, delta is now positive if wheel was scrolled up,
// and negative, if wheel was scrolled down.
if (delta) {
var oldLength = this.camera.getArmLength();
var newLength = oldLength * (1 - delta / 10);
this.camera.setArmLength(newLength);
this.redraw();
this._hideTooltip();
}
// fire a cameraPositionChange event
var parameters = this.getCameraPosition();
this.emit('cameraPositionChange', parameters);
// Prevent default actions caused by mouse wheel.
// That might be ugly, but we handle scrolls somehow
// anyway, so don't bother here..
util.preventDefault(event);
};
/**
* Test whether a point lies inside given 2D triangle
*
* @param {Point2d} point
* @param {Point2d[]} triangle
* @returns {boolean} true if given point lies inside or on the edge of the
* triangle, false otherwise
* @private
*/
Graph3d.prototype._insideTriangle = function (point, triangle) {
var a = triangle[0],
b = triangle[1],
c = triangle[2];
function sign (x) {
return x > 0 ? 1 : x < 0 ? -1 : 0;
}
var as = sign((b.x - a.x) * (point.y - a.y) - (b.y - a.y) * (point.x - a.x));
var bs = sign((c.x - b.x) * (point.y - b.y) - (c.y - b.y) * (point.x - b.x));
var cs = sign((a.x - c.x) * (point.y - c.y) - (a.y - c.y) * (point.x - c.x));
// each of the three signs must be either equal to each other or zero
return (as == 0 || bs == 0 || as == bs) &&
(bs == 0 || cs == 0 || bs == cs) &&
(as == 0 || cs == 0 || as == cs);
};
/**
* Find a data point close to given screen position (x, y)
*
* @param {Number} x
* @param {Number} y
* @returns {Object | null} The closest data point or null if not close to any
* data point
* @private
*/
Graph3d.prototype._dataPointFromXY = function (x, y) {
var i,
distMax = 100, // px
dataPoint = null,
closestDataPoint = null,
closestDist = null,
center = new Point2d(x, y);
if (this.style === Graph3d.STYLE.BAR ||
this.style === Graph3d.STYLE.BARCOLOR ||
this.style === Graph3d.STYLE.BARSIZE) {
// the data points are ordered from far away to closest
for (i = this.dataPoints.length - 1; i >= 0; i--) {
dataPoint = this.dataPoints[i];
var surfaces = dataPoint.surfaces;
if (surfaces) {
for (var s = surfaces.length - 1; s >= 0; s--) {
// split each surface in two triangles, and see if the center point is inside one of these
var surface = surfaces[s];
var corners = surface.corners;
var triangle1 = [corners[0].screen, corners[1].screen, corners[2].screen];
var triangle2 = [corners[2].screen, corners[3].screen, corners[0].screen];
if (this._insideTriangle(center, triangle1) ||
this._insideTriangle(center, triangle2)) {
// return immediately at the first hit
return dataPoint;
}
}
}
}
}
else {
// find the closest data point, using distance to the center of the point on 2d screen
for (i = 0; i < this.dataPoints.length; i++) {
dataPoint = this.dataPoints[i];
var point = dataPoint.screen;
if (point) {
var distX = Math.abs(x - point.x);
var distY = Math.abs(y - point.y);
var dist = Math.sqrt(distX * distX + distY * distY);
if ((closestDist === null || dist < closestDist) && dist < distMax) {
closestDist = dist;
closestDataPoint = dataPoint;
}
}
}
}
return closestDataPoint;
};
/**
* Display a tooltip for given data point
* @param {Object} dataPoint
* @private
*/
Graph3d.prototype._showTooltip = function (dataPoint) {
var content, line, dot;
if (!this.tooltip) {
content = document.createElement('div');
Object.assign(content.style, {}, this.tooltipStyle.content);
content.style.position = 'absolute';
line = document.createElement('div');
Object.assign(line.style, {}, this.tooltipStyle.line);
line.style.position = 'absolute';
dot = document.createElement('div');
Object.assign(dot.style, {}, this.tooltipStyle.dot);
dot.style.position = 'absolute';
this.tooltip = {
dataPoint: null,
dom: {
content: content,
line: line,
dot: dot
}
};
}
else {
content = this.tooltip.dom.content;
line = this.tooltip.dom.line;
dot = this.tooltip.dom.dot;
}
this._hideTooltip();
this.tooltip.dataPoint = dataPoint;
if (typeof this.showTooltip === 'function') {
content.innerHTML = this.showTooltip(dataPoint.point);
}
else {
content.innerHTML = '<table>' +
'<tr><td>' + this.xLabel + ':</td><td>' + dataPoint.point.x + '</td></tr>' +
'<tr><td>' + this.yLabel + ':</td><td>' + dataPoint.point.y + '</td></tr>' +
'<tr><td>' + this.zLabel + ':</td><td>' + dataPoint.point.z + '</td></tr>' +
'</table>';
}
content.style.left = '0';
content.style.top = '0';
this.frame.appendChild(content);
this.frame.appendChild(line);
this.frame.appendChild(dot);
// calculate sizes
var contentWidth = content.offsetWidth;
var contentHeight = content.offsetHeight;
var lineHeight = line.offsetHeight;
var dotWidth = dot.offsetWidth;
var dotHeight = dot.offsetHeight;
var left = dataPoint.screen.x - contentWidth / 2;
left = Math.min(Math.max(left, 10), this.frame.clientWidth - 10 - contentWidth);
line.style.left = dataPoint.screen.x + 'px';
line.style.top = (dataPoint.screen.y - lineHeight) + 'px';
content.style.left = left + 'px';
content.style.top = (dataPoint.screen.y - lineHeight - contentHeight) + 'px';
dot.style.left = (dataPoint.screen.x - dotWidth / 2) + 'px';
dot.style.top = (dataPoint.screen.y - dotHeight / 2) + 'px';
};
/**
* Hide the tooltip when displayed
* @private
*/
Graph3d.prototype._hideTooltip = function () {
if (this.tooltip) {
this.tooltip.dataPoint = null;
for (var prop in this.tooltip.dom) {
if (this.tooltip.dom.hasOwnProperty(prop)) {
var elem = this.tooltip.dom[prop];
if (elem && elem.parentNode) {
elem.parentNode.removeChild(elem);
}
}
}
}
};
/**--------------------------------------------------------------------------**/
/**
* Get the horizontal mouse position from a mouse event
*
* @param {Event} event
* @returns {Number} mouse x
*/
function getMouseX (event) {
if ('clientX' in event) return event.clientX;
return event.targetTouches[0] && event.targetTouches[0].clientX || 0;
}
/**
* Get the vertical mouse position from a mouse event
*
* @param {Event} event
* @returns {Number} mouse y
*/
function getMouseY (event) {
if ('clientY' in event) return event.clientY;
return event.targetTouches[0] && event.targetTouches[0].clientY || 0;
}
// -----------------------------------------------------------------------------
// Public methods for specific settings
// -----------------------------------------------------------------------------
/**
* Set the rotation and distance of the camera
*
* @param {Object} pos An object with the camera position
* @param {?Number} pos.horizontal The horizontal rotation, between 0 and 2*PI.
* Optional, can be left undefined.
* @param {?Number} pos.vertical The vertical rotation, between 0 and 0.5*PI.
* if vertical=0.5*PI, the graph is shown from
* the top. Optional, can be left undefined.
* @param {?Number} pos.distance The (normalized) distance of the camera to the
* center of the graph, a value between 0.71 and
* 5.0. Optional, can be left undefined.
*/
Graph3d.prototype.setCameraPosition = function(pos) {
Settings.setCameraPosition(pos, this);
this.redraw();
};
/**
* Set a new size for the graph
*
* @param {string} width Width in pixels or percentage (for example '800px'
* or '50%')
* @param {string} height Height in pixels or percentage (for example '400px'
* or '30%')
*/
Graph3d.prototype.setSize = function(width, height) {
this._setSize(width, height);
this.redraw();
};
// -----------------------------------------------------------------------------
// End public methods for specific settings
// -----------------------------------------------------------------------------
module.exports = Graph3d;