diff --git a/docs/graph3d/index.html b/docs/graph3d/index.html index 85829ad1..69d28ad6 100644 --- a/docs/graph3d/index.html +++ b/docs/graph3d/index.html @@ -386,6 +386,24 @@ var options = { Ratio of the size of the dots with respect to the width of the graph. + + dotSizeMinFraction + number + 0.5 + Size of minimum-value dot as a fraction of dotSizeRatio. + Applicable when using style dot-size. + + + + + dotSizeMaxFraction + number + 2.5 + Size of maximum-value dot as a fraction of dotSizeRatio. + Applicable when using style dot-size. + + + gridColor string diff --git a/examples/graph3d/08_dot_cloud_size.html b/examples/graph3d/08_dot_cloud_size.html index 1d6fb47f..99ab8ffd 100644 --- a/examples/graph3d/08_dot_cloud_size.html +++ b/examples/graph3d/08_dot_cloud_size.html @@ -49,7 +49,9 @@ horizontal: -0.54, vertical: 0.5, distance: 1.6 - } + }, + dotSizeMinFraction: 0.5, + dotSizeMaxFraction: 2.5 }; // create our graph diff --git a/lib/graph3d/Graph3d.js b/lib/graph3d/Graph3d.js index e24ed2e4..29371ff7 100755 --- a/lib/graph3d/Graph3d.js +++ b/lib/graph3d/Graph3d.js @@ -53,7 +53,10 @@ var DEFAULTS = { 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 + + 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, animationInterval : 1000, // milliseconds @@ -1014,7 +1017,8 @@ Graph3d.prototype._getLegendWidth = function() { if (this.style === Graph3d.STYLE.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) { width = this.xBarWidth ; } else { @@ -1086,8 +1090,8 @@ Graph3d.prototype._redrawLegend = function() { // draw the size legend box var widthMin; 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) { //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.moveTo(left, top); ctx.lineTo(right, top); - ctx.lineTo(right - width + widthMin, bottom); + ctx.lineTo(left + widthMin, bottom); ctx.lineTo(left, bottom); ctx.closePath(); ctx.fill(); @@ -1821,10 +1825,14 @@ Graph3d.prototype._redrawDotColorGraphPoint = function(ctx, point) { * 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(); + 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); }; diff --git a/lib/graph3d/Settings.js b/lib/graph3d/Settings.js index 484a40b0..b49ef7f3 100755 --- a/lib/graph3d/Settings.js +++ b/lib/graph3d/Settings.js @@ -63,6 +63,8 @@ var OPTIONKEYS = [ 'keepAspectRatio', 'verticalRatio', 'dotSizeRatio', + 'dotSizeMinFraction', + 'dotSizeMaxFraction', 'showAnimationControls', 'animationInterval', 'animationPreload',