Browse Source

Configurable minimum and maximum sizes for dot-size graphs (#2849)

Sorry for the delay on this... It took me a while to confirm this PR again. I don;t know why I didn't merge it at the time I reviewed it. Looks great to me!
gemini
wimrijnders 7 years ago
committed by yotamberk
parent
commit
85e36ed575
4 changed files with 40 additions and 10 deletions
  1. +18
    -0
      docs/graph3d/index.html
  2. +3
    -1
      examples/graph3d/08_dot_cloud_size.html
  3. +17
    -9
      lib/graph3d/Graph3d.js
  4. +2
    -0
      lib/graph3d/Settings.js

+ 18
- 0
docs/graph3d/index.html View File

@ -386,6 +386,24 @@ var options = {
<td>Ratio of the size of the dots with respect to the width of the graph.</td> <td>Ratio of the size of the dots with respect to the width of the graph.</td>
</tr> </tr>
<tr>
<td>dotSizeMinFraction</td>
<td>number</td>
<td>0.5</td>
<td>Size of minimum-value dot as a fraction of dotSizeRatio.
Applicable when using style <code>dot-size</code>.</td>
</td>
</tr>
<tr>
<td>dotSizeMaxFraction</td>
<td>number</td>
<td>2.5</td>
<td>Size of maximum-value dot as a fraction of dotSizeRatio.
Applicable when using style <code>dot-size</code>.</td>
</td>
</tr>
<tr> <tr>
<td>gridColor</td> <td>gridColor</td>
<td>string</td> <td>string</td>

+ 3
- 1
examples/graph3d/08_dot_cloud_size.html View File

@ -49,7 +49,9 @@
horizontal: -0.54, horizontal: -0.54,
vertical: 0.5, vertical: 0.5,
distance: 1.6 distance: 1.6
}
},
dotSizeMinFraction: 0.5,
dotSizeMaxFraction: 2.5
}; };
// create our graph // create our graph

+ 17
- 9
lib/graph3d/Graph3d.js View File

@ -53,7 +53,10 @@ var DEFAULTS = {
showShadow : false, showShadow : false,
keepAspectRatio : true, keepAspectRatio : true,
verticalRatio : 0.5, // 0.1 to 1.0, where 1.0 results in a 'cube' 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
dotSizeRatio : 0.02, // size of the dots as a fraction of the graph width
dotSizeMinFraction: 0.5, // size of min-value dot as a fraction of dotSizeRatio
dotSizeMaxFraction: 2.5, // size of max-value dot as a fraction of dotSizeRatio
showAnimationControls: autoByDefault, showAnimationControls: autoByDefault,
animationInterval : 1000, // milliseconds animationInterval : 1000, // milliseconds
@ -1014,7 +1017,8 @@ Graph3d.prototype._getLegendWidth = function() {
if (this.style === Graph3d.STYLE.DOTSIZE) { if (this.style === Graph3d.STYLE.DOTSIZE) {
var dotSize = this._dotSize(); var dotSize = this._dotSize();
width = dotSize / 2 + dotSize * 2;
//width = dotSize / 2 + dotSize * 2;
width = dotSize * this.dotSizeMaxFraction;
} else if (this.style === Graph3d.STYLE.BARSIZE) { } else if (this.style === Graph3d.STYLE.BARSIZE) {
width = this.xBarWidth ; width = this.xBarWidth ;
} else { } else {
@ -1086,8 +1090,8 @@ Graph3d.prototype._redrawLegend = function() {
// draw the size legend box // draw the size legend box
var widthMin; var widthMin;
if (this.style === Graph3d.STYLE.DOTSIZE) { if (this.style === Graph3d.STYLE.DOTSIZE) {
var dotSize = this._dotSize();
widthMin = dotSize / 2; // px
// Get the proportion to max and min right
widthMin = width * (this.dotSizeMinFraction / this.dotSizeMaxFraction);
} else if (this.style === Graph3d.STYLE.BARSIZE) { } else if (this.style === Graph3d.STYLE.BARSIZE) {
//widthMin = this.xBarWidth * 0.2 this is wrong - barwidth measures in terms of xvalues //widthMin = this.xBarWidth * 0.2 this is wrong - barwidth measures in terms of xvalues
} }
@ -1096,7 +1100,7 @@ Graph3d.prototype._redrawLegend = function() {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(left, top); ctx.moveTo(left, top);
ctx.lineTo(right, top); ctx.lineTo(right, top);
ctx.lineTo(right - width + widthMin, bottom);
ctx.lineTo(left + widthMin, bottom);
ctx.lineTo(left, bottom); ctx.lineTo(left, bottom);
ctx.closePath(); ctx.closePath();
ctx.fill(); ctx.fill();
@ -1821,10 +1825,14 @@ Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) {
* Draw single datapoint for graph style 'dot-size'. * Draw single datapoint for graph style 'dot-size'.
*/ */
Graph3d.prototype._redrawDotSizeGraphPoint = function(ctx, point) { 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();
var dotSize = this._dotSize();
var fraction = (point.point.value - this.valueRange.min) / this.valueRange.range();
var sizeMin = dotSize*this.dotSizeMinFraction;
var sizeRange = dotSize*this.dotSizeMaxFraction - sizeMin;
var size = sizeMin + sizeRange*fraction;
var colors = this._getColorsSize();
this._drawCircle(ctx, point, colors.fill, colors.border, size); this._drawCircle(ctx, point, colors.fill, colors.border, size);
}; };

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

@ -63,6 +63,8 @@ var OPTIONKEYS = [
'keepAspectRatio', 'keepAspectRatio',
'verticalRatio', 'verticalRatio',
'dotSizeRatio', 'dotSizeRatio',
'dotSizeMinFraction',
'dotSizeMaxFraction',
'showAnimationControls', 'showAnimationControls',
'animationInterval', 'animationInterval',
'animationPreload', 'animationPreload',

Loading…
Cancel
Save