jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
Browse Source

Merge pull request #2214 from wimrijnders/PR23 

Add point draw methods for styles 'dot-color' and 'dot-size'
codeClimate
yotamberk 8 years ago
committed by GitHub
parent
1c4e1a41ee 9e1fd6671e
commit
a9be8e796b
1 changed files with 111 additions and 114 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +111
    -114
      lib/graph3d/Graph3d.js

+ 111
- 114
lib/graph3d/Graph3d.js View File

@ -837,9 +837,15 @@ Graph3d.prototype.getPointDrawingMethod = function() {
case Graph3d.STYLE.DOT:
pointDrawingMethod = Graph3d.prototype._redrawDotGraphPoint;
break;
case Graph3d.STYLE.DOT:
case Graph3d.STYLE.DOTLINE:
pointDrawingMethod = Graph3d.prototype._redrawDotLineGraphPoint;
break;
case Graph3d.STYLE.DOTCOLOR:
pointDrawingMethod = Graph3d.prototype._redrawDotColorGraphPoint;
break;
case Graph3d.STYLE.DOTSIZE:
pointDrawingMethod = Graph3d.prototype._redrawDotSizeGraphPoint;
break;
}
return pointDrawingMethod;
@ -877,8 +883,8 @@ Graph3d.prototype.redraw = function() {
this._redrawDataLine();
}
else {
// style is DOT, DOTLINE, DOTCOLOR, DOTSIZE
this._redrawDataDot();
// Should not be reached any more.
throw new Error('Unknown graph style \'' + this.style + '\'');
}
}
@ -893,6 +899,10 @@ Graph3d.prototype.redraw = function() {
Graph3d.prototype._getContext = function() {
var canvas = this.frame.canvas;
var ctx = canvas.getContext('2d');
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
return ctx;
};
@ -1430,9 +1440,6 @@ 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?
@ -1522,95 +1529,18 @@ Graph3d.prototype._getStrokeWidth = function(point) {
return this.dataColor.strokeWidth;
};
/**
* Draw all datapoints as dots.
* This function can be used when the style is 'dot' or 'dot-line'
*/
Graph3d.prototype._redrawDataDot = function() {
var ctx = this._getContext();
var i;
if (this.dataPoints === undefined || this.dataPoints.length <= 0)
return; // TODO: throw exception?
this._calcTranslations(this.dataPoints);
// draw the datapoints as colored circles
var dotSize = this._dotSize();
for (i = 0; i < this.dataPoints.length; i++) {
var point = this.dataPoints[i];
if (this.style === Graph3d.STYLE.DOTLINE) {
// draw a vertical line from the bottom to the graph value
//var from = this._convert3Dto2D(new Point3d(point.point.x, point.point.y, this.zMin));
var from = this._convert3Dto2D(point.bottom);
ctx.lineWidth = 1;
this._line(ctx, from, point.screen, this.gridColor);
}
// calculate radius for the circle
var size;
if (this.style === Graph3d.STYLE.DOTSIZE) {
size = dotSize/2 + 2*dotSize * (point.point.value - this.valueMin) / (this.valueMax - this.valueMin);
}
else {
size = 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;
}
var hue, color, borderColor;
if (this.style === Graph3d.STYLE.DOTCOLOR ) {
// calculate the color based on the value
hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
color = this._hsv2rgb(hue, 1, 1);
borderColor = this._hsv2rgb(hue, 1, 0.8);
}
else if (this.style === Graph3d.STYLE.DOTSIZE) {
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;
color = this._hsv2rgb(hue, 1, 1);
borderColor = this._hsv2rgb(hue, 1, 0.8);
}
// draw the circle
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();
}
};
// -----------------------------------------------------------------------------
// 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, corners;
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
// calculate all corner points
var me = this;
var point3d = point.point;
@ -1688,7 +1618,12 @@ Graph3d.prototype._redrawBar = function(ctx, point, xWidth, yWidth, color, borde
};
Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor) {
/**
* @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;
@ -1699,7 +1634,10 @@ Graph3d.prototype._drawCircle = function(ctx, point, radius, color, borderColor)
};
Graph3d.prototype._getColorsRegular = function(ctx, point) {
/**
* 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.zMin) * this.scale.z / this.verticalRatio) * 240;
var color = this._hsv2rgb(hue, 1, 1);
@ -1711,6 +1649,63 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) {
};
};
/**
* Get the colors for the 'color' graph styles.
* These styles are currently: 'bar-color' and 'dot-color'
*/
Graph3d.prototype._getColorsColor = function(point) {
// calculate the color based on the value
var hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 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 '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.
// -----------------------------------------------------------------------------
@ -1722,7 +1717,7 @@ Graph3d.prototype._getColorsRegular = function(ctx, point) {
Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2;
var colors = this._getColorsRegular(ctx, point);
var colors = this._getColorsRegular(point);
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};
@ -1734,13 +1729,9 @@ Graph3d.prototype._redrawBarGraphPoint = function(ctx, point) {
Graph3d.prototype._redrawBarColorGraphPoint = function(ctx, point) {
var xWidth = this.xBarWidth / 2;
var yWidth = this.yBarWidth / 2;
var colors = this._getColorsColor(point);
// calculate the color based on the value
var hue = (1 - (point.point.value - this.valueMin) * this.scale.value) * 240;
var color = this._hsv2rgb(hue, 1, 1);
var borderColor = this._hsv2rgb(hue, 1, 0.8);
this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};
@ -1753,11 +1744,9 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
var xWidth = (this.xBarWidth / 2) * (fraction * 0.8 + 0.2);
var yWidth = (this.yBarWidth / 2) * (fraction * 0.8 + 0.2);
// determine color
var color = this.dataColor.fill;
var borderColor = this.dataColor.stroke;
var colors = this._getColorsSize();
this._redrawBar(ctx, point, xWidth, yWidth, color, borderColor);
this._redrawBar(ctx, point, xWidth, yWidth, colors.fill, colors.border);
};
@ -1765,22 +1754,9 @@ Graph3d.prototype._redrawBarSizeGraphPoint = function(ctx, point) {
* Draw single datapoint for graph style 'dot'.
*/
Graph3d.prototype._redrawDotGraphPoint = function(ctx, point) {
var size = this._dotSize();
var colors = this._getColorsRegular(point);
var radius;
if (this.showPerspective) {
radius = size / -point.trans.z;
}
else {
radius = size * -(this.eye.z / this.camera.getArmLength());
}
if (radius < 0) {
radius = 0;
}
var colors = this._getColorsRegular(ctx, point);
this._drawCircle(ctx, point, radius, colors.fill, colors.border);
this._drawCircle(ctx, point, colors.fill, colors.border);
};
@ -1797,6 +1773,29 @@ Graph3d.prototype._redrawDotLineGraphPoint = function(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.valueMin) / (this.valueMax - this.valueMin);
var size = dotSize/2 + 2*dotSize * fraction;
var colors = this._getColorsSize();
this._drawCircle(ctx, point, colors.fill, colors.border, size);
};
/**
* Draw all datapoints for currently selected graph style.
*
@ -1843,8 +1842,6 @@ Graph3d.prototype._redrawDataLine = function() {
point = this.dataPoints[0];
ctx.lineWidth = this._getStrokeWidth(point);
ctx.lineJoin = 'round';
ctx.lineCap = 'round';
ctx.strokeStyle = this.dataColor.stroke;
for (i = 0; i < this.dataPoints.length; i++) {

Write Preview
Loading…
Cancel
Save