- Fixed invalid css names for time axis grid, renamed hours class names from
- Fixed invalid css names for time axis grid, renamed hours class names from
`4-8h` to `h4-h8`.
`4-8h` to `h4-h8`.
### Network
- Rebuilt the cluster system
## not yet released, version 3.10.1-SNAPSHOT
### Network
- (added gradient coloring for lines, but set for release in 4.0 due to required refactoring of options)
- Fixed bug where a network that has frozen physics would resume redrawing after setData, setOptions etc.
- (add docs) Added option to bypass default groups. If more groups are specified in the nodes than there are in the groups, loop over supplied groups instead of default.
- (add docs) Added two new static smooth curves modes: curveCW and curve CCW.
- Added request redraw for certain internal processes to reduce number of draw calls.
- Added pull request for usage of Icons. Thanks @Dude9177!
- Allow hierarchical view to be set in setOptions.
### Graph2d
### Timeline
- Fixed not property initializing with a DataView for groups.
<td>The ID of the group this point belongs to.</td>
<td>The ID of the group this point belongs to.</td>
</tr>
</tr>
<tr>
<td>label</td>
<td>object</td>
<td>no</td>
<td>A label object which will be displayed near to the item. A label object has one requirement - a <b> content </b> property. In addition you can set the <b> xOffset, yOffset and className </b> for further appearance customisations </td>
<td>The maximum radius for a scaled node. Only applicable to shapes <code>dot</code>,
<td>The maximum radius for a scaled node. Only applicable to shapes <code>dot</code>,
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. This only does something if you supply a value.</td>
<code>star</code>, <code>triangle</code>, <code>triangleDown</code>, and <code>square</code>. This only does something if you supply a value.</td>
</tr>
</tr>
<tr>
<tdclass="greenField">iconFontFace</td>
<td>String</td>
<td>undefined</td>
<td>Font face for icons, for example <code>FontAwesome</code> or <code>Ionicon</code>.<br/><em>You have to link to the css defining the font by yourself (see Examples)</em></td>
</tr>
<tr>
<tdclass="greenField">icon</td>
<td>String</td>
<td>undefined</td>
<td>Unicode of the icon f.e. <code>\uf0c0</code> (user-icon in FontAwesome)</td>
This example shows the how to add a label to each point in Graph2d. Each item can have a label object which contains the content and CSS class.In addition, xOffset and yOffset will adjust the location of the label relative to the point being labelled.
<br/><br/>
</div>
<br/>
<divid="visualization"></div>
<scripttype="text/javascript">
var container = document.getElementById('visualization');
var label1 = {
content: "offset label",
xOffset: 20,
yOffset: 20
}
var label2 = {
content: "Label2",
className: "red"
}
var items = [
{x: '2014-06-11', y: 10,label:label1},
{x: '2014-06-12', y: 25,label:label2},
{x: '2014-06-13', y: 30},
{x: '2014-06-14', y: 10},
{x: '2014-06-15', y: 15},
{x: '2014-06-16', y: 30}
];
var dataset = new vis.DataSet(items);
var options = {
start: '2014-06-10',
end: '2014-06-18',
style:'bar'
};
var graph2d = new vis.Graph2d(container, dataset, options);
Roundness (0..1): <inputtype="range"min="0"max="1"value="0.5"step="0.05"style="width:200px"id="roundnessSlider"><inputid="roundnessScreen"value="0.5"> (0.5 is max roundness for continuous, 1.0 for the others)
<divid="mynetwork"></div>
<divid="mynetwork"></div>
<scripttype="text/javascript">
<scripttype="text/javascript">
var dropdown = document.getElementById("dropdownID");
var dropdown = document.getElementById("dropdownID");
dropdown.onchange = update;
dropdown.onchange = update;
var roundnessSlider = document.getElementById("roundnessSlider");
roundnessSlider.onchange = update;
var roundnessScreen = document.getElementById("roundnessScreen");
// create an array with nodes
// create an array with nodes
var nodes = [
var nodes = [
{id: 1, label: 'Node 1'},
{id: 1, label: 'Node 1'},
@ -53,7 +60,7 @@ dropdown.onchange = update;
// create an array with edges
// create an array with edges
var edges = [
var edges = [
{from: 1, to: 2}
{from: 1, to: 2, style:"arrow"}
];
];
// create a network
// create a network
@ -68,8 +75,14 @@ dropdown.onchange = update;
function update() {
function update() {
var type = dropdown.value;
var type = dropdown.value;
network.setOptions({smoothCurves:{type:type}});
var roundness = roundnessSlider.value;
roundnessScreen.value = roundness;
var options = {smoothCurves:{type:type, roundness:roundness}}
{border:"#4AD63A",background:"#C2FABC",highlight:{border:"#4AD63A",background:"#E6FFE3"},hover:{border:"#4AD63A",background:"#E6FFE3"}},// 9: mint
{border:"#990000",background:"#EE0000",highlight:{border:"#BB0000",background:"#FF3333"},hover:{border:"#BB0000",background:"#FF3333"}},// 10:bright red
{border:"#FF6000",background:"#FF6000",highlight:{border:"#FF6000",background:"#FF6000"},hover:{border:"#FF6000",background:"#FF6000"}},// 12: real orange
{border:"#97C2FC",background:"#2B7CE9",highlight:{border:"#D2E5FF",background:"#2B7CE9"},hover:{border:"#D2E5FF",background:"#2B7CE9"}},// 13: blue
{border:"#399605",background:"#255C03",highlight:{border:"#399605",background:"#255C03"},hover:{border:"#399605",background:"#255C03"}},// 14: green
{border:"#C2FABC",background:"#74D66A",highlight:{border:"#E6FFE3",background:"#74D66A"},hover:{border:"#E6FFE3",background:"#74D66A"}},// 19: mint
{border:"#EE0000",background:"#990000",highlight:{border:"#FF3333",background:"#BB0000"},hover:{border:"#FF3333",background:"#BB0000"}},// 20:bright red
];
];
@ -54,12 +70,22 @@ Groups.prototype.clear = function () {
@ -45,7 +45,6 @@ function Network (container, data, options) {
this.renderRefreshRate=60;// hz (fps)
this.renderRefreshRate=60;// hz (fps)
this.renderTimestep=1000/this.renderRefreshRate;// ms -- saves calculation later on
this.renderTimestep=1000/this.renderRefreshRate;// ms -- saves calculation later on
this.renderTime=0;// measured time it takes to render a frame
this.renderTime=0;// measured time it takes to render a frame
this.physicsTime=0;// measured time it takes to render a frame
this.runDoubleSpeed=false;
this.runDoubleSpeed=false;
this.physicsDiscreteStepsize=0.50;// discrete stepsize of the simulation
this.physicsDiscreteStepsize=0.50;// discrete stepsize of the simulation
@ -85,6 +84,7 @@ function Network (container, data, options) {
fontSizeMin:14,
fontSizeMin:14,
fontSizeMax:30,
fontSizeMax:30,
fontSizeMaxVisible:30,
fontSizeMaxVisible:30,
value:1,
level:-1,
level:-1,
color:{
color:{
border:'#2B7CE9',
border:'#2B7CE9',
@ -109,6 +109,7 @@ function Network (container, data, options) {
width:1,
width:1,
widthSelectionMultiplier:2,
widthSelectionMultiplier:2,
hoverWidth:1.5,
hoverWidth:1.5,
value:1,
style:'line',
style:'line',
color:{
color:{
color:'#848484',
color:'#848484',
@ -129,7 +130,8 @@ function Network (container, data, options) {
gap:5,
gap:5,
altLength:undefined
altLength:undefined
},
},
inheritColor:"from"// to, from, false, true (== from)
inheritColor:"from",// to, from, false, true (== from)
useGradients:false// release in 4.0
},
},
configurePhysics:false,
configurePhysics:false,
physics:{
physics:{
@ -163,26 +165,7 @@ function Network (container, data, options) {
springConstant:null
springConstant:null
},
},
clustering:{// Per Node in Cluster = PNiC
clustering:{// Per Node in Cluster = PNiC
enabled:false,// (Boolean) | global on/off switch for clustering.
initialMaxNodes:100,// (# nodes) | if the initial amount of nodes is larger than this, we cluster until the total number is less than this threshold.
clusterThreshold:500,// (# nodes) | during calculate forces, we check if the total number of nodes is larger than this. If it is, cluster until reduced to reduceToNodes
reduceToNodes:300,// (# nodes) | during calculate forces, we check if the total number of nodes is larger than clusterThreshold. If it is, cluster until reduced to this
chainThreshold:0.4,// (% of all drawn nodes)| maximum percentage of allowed chainnodes (long strings of connected nodes) within all nodes. (lower means less chains).
clusterEdgeThreshold:20,// (px) | edge length threshold. if smaller, this node is clustered.
sectorThreshold:100,// (# nodes in cluster) | cluster size threshold. If larger, expanding in own sector.
screenSizeThreshold:0.2,// (% of canvas) | relative size threshold. If the width or height of a clusternode takes up this much of the screen, decluster node.
fontSizeMultiplier:4.0,// (px PNiC) | how much the cluster font size grows per node in cluster (in px).
maxFontSize:1000,
forceAmplification:0.1,// (multiplier PNiC) | factor of increase fo the repulsion force of a cluster (per node in cluster).
distanceAmplification:0.1,// (multiplier PNiC) | factor how much the repulsion distance of a cluster increases (per node in cluster).
edgeGrowth:20,// (px PNiC) | amount of clusterSize connected to the edge is multiplied with this and added to edgeLength.
nodeScaling:{width:1,// (px PNiC) | growth of the width per node in cluster.
height:1,// (px PNiC) | growth of the height per node in cluster.
radius:1},// (px PNiC) | growth of the radius per node in cluster.
maxNodeSizeIncrements:600,// (# increments) | max growth of the width per node in cluster.
activeAreaBoxSize:80,// (px) | box area around the curser where clusters are popped open.
clusterLevelDifference:2,// used for normalization of the cluster levels
clusterByZoom:true// enable clustering through zooming in and out
enabled:false// (Boolean) | global on/off switch for clustering.
},
},
navigation:{
navigation:{
enabled:false
enabled:false
@ -214,6 +197,7 @@ function Network (container, data, options) {
minVelocity:0.1,// px/s
minVelocity:0.1,// px/s
stabilize:true,// stabilize before displaying the network
stabilize:true,// stabilize before displaying the network
stabilizationIterations:1000,// maximum number of iteration to stabilize
stabilizationIterations:1000,// maximum number of iteration to stabilize
stabilizationStepsize:100,
zoomExtentOnStabilize:true,
zoomExtentOnStabilize:true,
locale:'en',
locale:'en',
locales:locales,
locales:locales,
@ -235,7 +219,8 @@ function Network (container, data, options) {
// this check is to ensure that the network does not emit these events if it was already stabilized and setOptions is called (setting moving to true and calling start())
// this check is to ensure that the network does not emit these events if it was already stabilized and setOptions is called (setting moving to true and calling start())
Alex de Mulder
9 years ago