Browse Source

made scaling function customizable

v3_develop
Alex de Mulder 9 years ago
parent
commit
164653cdd7
6 changed files with 27562 additions and 27474 deletions
  1. +27482
    -27454
      dist/vis.js
  2. +32
    -0
      docs/network.html
  3. +6
    -4
      lib/network/Edge.js
  4. +14
    -1
      lib/network/Network.js
  5. +8
    -15
      lib/network/Node.js
  6. +20
    -0
      lib/util.js

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


+ 32
- 0
docs/network.html View File

@ -849,6 +849,13 @@ var options = {
inside an object <code>nodes</code> in the networks options object.</p> All options in green boxes can be defined per-node as well. inside an object <code>nodes</code> in the networks options object.</p> All options in green boxes can be defined per-node as well.
All options defined per-node override these global settings. All options defined per-node override these global settings.
<table> <table>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
<tr> <tr>
<td class="greenField">borderWidth</td> <td class="greenField">borderWidth</td>
<td>Number</td> <td>Number</td>
@ -861,6 +868,31 @@ All options defined per-node override these global settings.
<td>undefined</td> <td>undefined</td>
<td>The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used.</td> <td>The width of the border of the node when it is selected. If left at undefined, double the borderWidth will be used.</td>
</tr> </tr>
<tr>
<td>customScalingFunction</td>
<td>Function</td>
<td>Function</td>
<td>This is a function you can override to make the nodes scale the way you want them based on their values. The default function is this: <br>
<pre class="prettyprint lang-js">
function (min,max,total,value) {
if (max == min) {
return 0.5;
}
else {
var scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
};
</pre>
The function receives the minimum value of the set, the maximum value, the total sum of all values and finally the value of the node or edge it works on. It has to return a value between 0 and 1.
The nodes and edges then calculate their size as follows:
<pre class="prettyprint lang-js">
var scale = customScalingFunction(min,max,total,value);
var diff = maxSize - minSize;
mySize = minSize + diff * scale;</pre>
</td>
</tr>
<tr> <tr>
<td class="greenField">color</td> <td class="greenField">color</td>
<td>String | Object</td> <td>String | Object</td>

+ 6
- 4
lib/network/Edge.js View File

@ -78,7 +78,8 @@ Edge.prototype.setProperties = function(properties) {
} }
var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width', var fields = ['style','fontSize','fontFace','fontColor','fontFill','fontStrokeWidth','fontStrokeColor','width',
'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment', 'opacity'
'widthSelectionMultiplier','hoverWidth','arrowScaleFactor','dash','inheritColor','labelAlignment', 'opacity',
'customScalingFunction'
]; ];
util.selectiveDeepExtend(fields, this.options, properties); util.selectiveDeepExtend(fields, this.options, properties);
@ -190,10 +191,11 @@ Edge.prototype.getValue = function() {
* @param {Number} min * @param {Number} min
* @param {Number} max * @param {Number} max
*/ */
Edge.prototype.setValueRange = function(min, max) {
Edge.prototype.setValueRange = function(min, max, total) {
if (!this.widthFixed && this.value !== undefined) { if (!this.widthFixed && this.value !== undefined) {
var scale = (this.options.widthMax - this.options.widthMin) / (max - min);
this.options.width= (this.value - min) * scale + this.options.widthMin;
var scale = this.options.customScalingFunction(min, max, total, this.value);
var widthDiff = this.options.widthMax - this.options.widthMin;
this.options.width = this.options.widthMin + scale * widthDiff;
this.widthSelected = this.options.width* this.options.widthSelectionMultiplier; this.widthSelected = this.options.width* this.options.widthSelectionMultiplier;
} }
}; };

+ 14
- 1
lib/network/Network.js View File

@ -53,9 +53,19 @@ function Network (container, data, options) {
this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null}; this.triggerFunctions = {add:null,edit:null,editEdge:null,connect:null,del:null};
var customScalingFunction = function (min,max,total,value) {
if (max == min) {
return 0.5;
}
else {
var scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
};
// set constant values // set constant values
this.defaultOptions = { this.defaultOptions = {
nodes: { nodes: {
customScalingFunction: customScalingFunction,
mass: 1, mass: 1,
radiusMin: 10, radiusMin: 10,
radiusMax: 30, radiusMax: 30,
@ -93,6 +103,7 @@ function Network (container, data, options) {
borderWidthSelected: undefined borderWidthSelected: undefined
}, },
edges: { edges: {
customScalingFunction: customScalingFunction,
widthMin: 1, // widthMin: 1, //
widthMax: 15,// widthMax: 15,//
width: 1, width: 1,
@ -1866,12 +1877,14 @@ Network.prototype._updateValueRange = function(obj) {
// determine the range of the objects // determine the range of the objects
var valueMin = undefined; var valueMin = undefined;
var valueMax = undefined; var valueMax = undefined;
var valueTotal = 0;
for (id in obj) { for (id in obj) {
if (obj.hasOwnProperty(id)) { if (obj.hasOwnProperty(id)) {
var value = obj[id].getValue(); var value = obj[id].getValue();
if (value !== undefined) { if (value !== undefined) {
valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin); valueMin = (valueMin === undefined) ? value : Math.min(value, valueMin);
valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax); valueMax = (valueMax === undefined) ? value : Math.max(value, valueMax);
valueTotal += value;
} }
} }
} }
@ -1880,7 +1893,7 @@ Network.prototype._updateValueRange = function(obj) {
if (valueMin !== undefined && valueMax !== undefined) { if (valueMin !== undefined && valueMax !== undefined) {
for (id in obj) { for (id in obj) {
if (obj.hasOwnProperty(id)) { if (obj.hasOwnProperty(id)) {
obj[id].setValueRange(valueMin, valueMax);
obj[id].setValueRange(valueMin, valueMax, valueTotal);
} }
} }
} }

+ 8
- 15
lib/network/Node.js View File

@ -154,7 +154,7 @@ Node.prototype.setProperties = function(properties, constants) {
var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor', var fields = ['borderWidth','borderWidthSelected','shape','image','brokenImage','radius','fontColor',
'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold', 'fontSize','fontFace','fontFill','fontStrokeWidth','fontStrokeColor','group','mass','fontDrawThreshold',
'scaleFontWithValue','fontSizeMaxVisible'
'scaleFontWithValue','fontSizeMaxVisible','customScalingFunction'
]; ];
util.selectiveDeepExtend(fields, this.options, properties); util.selectiveDeepExtend(fields, this.options, properties);
@ -479,22 +479,15 @@ Node.prototype.getDistance = function(x, y) {
* @param {Number} min * @param {Number} min
* @param {Number} max * @param {Number} max
*/ */
Node.prototype.setValueRange = function(min, max) {
Node.prototype.setValueRange = function(min, max, total) {
if (!this.radiusFixed && this.value !== undefined) { if (!this.radiusFixed && this.value !== undefined) {
if (max == min) {
this.options.radius= (this.options.radiusMin + this.options.radiusMax) / 2;
if (this.options.scaleFontWithValue == true) {
this.options.fontSize = (this.options.fontSizeMin + this.options.fontSizeMax) / 2;
}
}
else {
var scale = (this.options.radiusMax - this.options.radiusMin) / (max - min);
var fontScale = (this.options.fontSizeMax - this.options.fontSizeMin) / (max - min);
if (this.options.scaleFontWithValue == true) {
this.options.fontSize = Math.max(this.options.fontSizeMin ,(this.value - min) * fontScale + this.options.fontSizeMin);
}
this.options.radius= Math.max(this.options.radiusMin,(this.value - min) * scale + this.options.radiusMin); // max function is protection against value = 0
var scale = this.options.customScalingFunction(min, max, total, this.value);
var radiusDiff = this.options.radiusMax - this.options.radiusMin;
if (this.options.scaleFontWithValue == true) {
var fontDiff = this.options.fontSizeMax - this.options.fontSizeMin;
this.options.fontSize = this.options.fontSizeMin + scale * fontDiff;
} }
this.options.radius = this.options.radiusMin + scale * radiusDiff;
} }
this.baseRadiusValue = this.options.radius; this.baseRadiusValue = this.options.radius;

+ 20
- 0
lib/util.js View File

@ -13,6 +13,26 @@ exports.isNumber = function(object) {
return (object instanceof Number || typeof object == 'number'); return (object instanceof Number || typeof object == 'number');
}; };
/**
* this function gives you a range between 0 and 1 based on the min and max values in the set, the total sum of all values and the current value.
*
* @param min
* @param max
* @param total
* @param value
* @returns {number}
*/
exports.giveRange = function(min,max,total,value) {
if (max == min) {
return 0.5;
}
else {
var scale = 1 / (max - min);
return Math.max(0,(value - min)*scale);
}
}
/** /**
* Test whether given object is a string * Test whether given object is a string
* @param {*} object * @param {*} object

Loading…
Cancel
Save