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

Released version 3.2.0

gh-pages
jos 10 years ago
parent
875770ab33
commit
44aabd985a
26 changed files with 10051 additions and 10205 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +0
    -4
      dist/vis.css
  2. +9597
    -10109
      dist/vis.js
  3. +1
    -1
      dist/vis.map
  4. +1
    -1
      dist/vis.min.css
  5. +14
    -14
      dist/vis.min.js
  6. +36
    -2
      docs/graph2d.html
  7. +2
    -6
      docs/network.html
  8. BIN
      download/vis.zip
  9. +367
    -0
      examples/graph2d/09_external_legend.html
  10. +1
    -0
      examples/graph2d/index.html
  11. +1
    -2
      examples/network/02_random_nodes.html
  12. +4
    -9
      examples/network/06_groups.html
  13. +1
    -1
      examples/network/10_multiline_text.html
  14. +1
    -1
      examples/network/11_custom_style.html
  15. +1
    -3
      examples/network/13_dashed_lines.html
  16. +5
    -5
      examples/network/17_network_info.html
  17. +2
    -4
      examples/network/18_fully_random_nodes_clustering.html
  18. +1
    -12
      examples/network/19_scale_free_graph_clustering.html
  19. +1
    -15
      examples/network/20_navigation.html
  20. +1
    -4
      examples/network/21_data_manipulation.html
  21. +1
    -3
      examples/network/23_hierarchical_layout.html
  22. +1
    -1
      examples/network/24_hierarchical_layout_userdefined.html
  23. +3
    -5
      examples/network/25_physics_configuration.html
  24. +1
    -1
      examples/network/26_staticSmoothCurves.html
  25. +1
    -1
      examples/network/30_importing_from_gephi.html
  26. +7
    -1
      index.html

+ 0
- 4
dist/vis.css View File

@ -665,10 +665,6 @@ div.network-navigation:active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
}
div.network-navigation.active {
box-shadow: 0px 0px 1px 3px rgba(56, 207, 21, 0.95);
}
div.network-navigation.up {
background-image: url("img/network/upArrow.png");
bottom:50px;

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


+ 1
- 1
dist/vis.map
File diff suppressed because it is too large
View File


+ 1
- 1
dist/vis.min.css
File diff suppressed because it is too large
View File


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


+ 36
- 2
docs/graph2d.html View File

@ -174,7 +174,7 @@ var items = [
</tr>
</table>
<h3 id="Groups">Groups</h3>
<h3 id="groups">Groups</h3>
<p>
Like the items, groups are regular JavaScript Arrays and Objects.
@ -191,7 +191,8 @@ var items = [
var groups = new vis.DataSet();
groups.add({
id: 1,
content: 'Group 1'
content: 'Group 1',
// Optional: a field 'visible'
// Optional: a field 'className'
// Optional: options
})
@ -241,6 +242,12 @@ groups.add({
<td>This field is optional. The options can be used to give a group a specific draw style.
Any options that are colored green in the Configuration Options can be used as options here.
</tr>
<tr>
<td>visible</td>
<td>Boolean</td>
<td>true</td>
<td>This field is optional. If false, the graph will not be drawn.
</tr>
</table>
<h2 id="Configuration_Options">Configuration Options</h2>
@ -674,12 +681,32 @@ Graph2d.clear({options: true}); // clear options only
</td>
</tr>
<tr>
<td>getLegend(groupId, iconWidth, iconHeight)</td>
<td>SVGelement, String, String</td>
<td>Returns an object containing an SVG element with the icon of the group (size determined by iconWidth and iconHeight), the label of the group (content) and the yAxisOrientation of the group (left or right).
</td>
</tr>
<tr>
<td>getWindow()</td>
<td>Object</td>
<td>Get the current visible window. Returns an object with properties <code>start: Date</code> and <code>end: Date</code>.</td>
</tr>
<tr>
<td>getItemRange()</td>
<td>Object</td>
<td>Get the range of all the items as an object containing <code>min: Date</code> and <code>max: Date</code>.</td>
</tr>
<tr>
<td>fit()</td>
<td>none</td>
<td>Adjust the visible window such that it fits all items.
</td>
</tr>
<tr>
<td>on(event, callback)</td>
<td>none</td>
@ -699,6 +726,13 @@ Graph2d.clear({options: true}); // clear options only
</td>
</tr>
<tr>
<td>isGroupVisible(groupId)</td>
<td>Boolean</td>
<td>This checks if the visible option of the supplied group (by ID) is true or false.
</td>
</tr>
<tr>
<td>setGroups(groups)</td>
<td>none</td>

+ 2
- 6
docs/network.html View File

@ -1261,6 +1261,8 @@ var options = {
<p>
Edges can be configured with different length and styling. To configure edges, provide an object named <code>edges</code> in the <code>options</code> for the Network.
Because the length of an edge is a property of the physics simulation, you can change the length of the edge by changing the springLength in your selected physics solver.
To change the edge length of individual edges, you can use the <code>length</code> property in the <a href="Edges">edge definition</a>.
</p>
<p>
@ -1353,12 +1355,6 @@ var options = {
<td>Default length of a gap in pixels on a dashed line.
Only applicable when the line style is <code>dash-line</code>.</td>
</tr>
<tr>
<td>length</td>
<td>number</td>
<td>physics.[method].springLength</td>
<td>The resting length of the edge when modeled as a spring. By default the springLength determined by the physics is used. By using this setting you can make certain edges have different resting lengths.</td>
</tr>
<tr>
<td>inheritColor</td>

BIN
download/vis.zip View File


+ 367
- 0
examples/graph2d/09_external_legend.html View File

@ -0,0 +1,367 @@
<!DOCTYPE HTML>
<html>
<head>
<title>Graph2d | External legend Example</title>
<link href="../../dist/vis.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body, html {
font-family: sans-serif;
}
.customStyle1 {
fill: #f2ea00;
fill-opacity:0;
stroke-width:2px;
stroke: #b3ab00;
}
.customStyle2 {
fill: #00a0f2;
fill-opacity:0;
stroke-width:2px;
stroke: #050092;
}
.customStyle3 {
fill: #00f201;
fill-opacity:0;
stroke-width:2px;
stroke: #029200;
}
path.customStyle3.fill {
fill-opacity:0.5 !important;
stroke: none;
}
.graphGroup0 {
fill:#4f81bd;
fill-opacity:0;
stroke-width:2px;
stroke: #4f81bd;
}
.graphGroup1 {
fill:#f79646;
fill-opacity:0;
stroke-width:2px;
stroke: #f79646;
}
.graphGroup2 {
fill: #8c51cf;
fill-opacity:0;
stroke-width:2px;
stroke: #8c51cf;
}
.graphGroup3 {
fill: #75c841;
fill-opacity:0;
stroke-width:2px;
stroke: #75c841;
}
.graphGroup4 {
fill: #ff0100;
fill-opacity:0;
stroke-width:2px;
stroke: #ff0100;
}
.graphGroup5 {
fill: #37d8e6;
fill-opacity:0;
stroke-width:2px;
stroke: #37d8e6;
}
.graphGroup6 {
fill: #042662;
fill-opacity:0;
stroke-width:2px;
stroke: #042662;
}
.graphGroup7 {
fill:#00ff26;
fill-opacity:0;
stroke-width:2px;
stroke: #00ff26;
}
.graphGroup8 {
fill:#ff00ff;
fill-opacity:0;
stroke-width:2px;
stroke: #ff00ff;
}
.graphGroup9 {
fill: #8f3938;
fill-opacity:0;
stroke-width:2px;
stroke: #8f3938;
}
.fill {
fill-opacity:0.1;
stroke: none;
}
.bar {
fill-opacity:0.5;
stroke-width:1px;
}
.point {
stroke-width:2px;
fill-opacity:1.0;
}
.legendBackground {
stroke-width:1px;
fill-opacity:0.9;
fill: #ffffff;
stroke: #c2c2c2;
}
.outline {
stroke-width:1px;
fill-opacity:1;
fill: #ffffff;
stroke: #e5e5e5;
}
.iconFill {
fill-opacity:0.3;
stroke: none;
}
div.descriptionContainer {
float:left;
height:30px;
width:160px;
padding-left:5px;
padding-right:5px;
line-height: 30px;
}
div.iconContainer {
float:left;
}
div.legendElementContainer {
display:inline-block;
width:200px;
height:30px;
border-style:solid;
border-width:1px;
border-color: #e0e0e0;
background-color: #ffffff;
margin:4px;
padding:4px;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor:pointer;
}
div.legendElementContainer.hidden {
background-color: #d3e6ff;
}
svg.legendIcon {
width:30px;
height:30px;
}
div.externalLegend {
position:relative;
margin-left: -5px;
width: 900px;
}
</style>
<script src="../../dist/vis.js"></script>
</head>
<body>
<h2>Graph2d | External custom legend</h2>
<div style="width:800px; font-size:14px; text-align: justify;">
This example shows how to create an external custom legend using the getLegend function. We use normal JavaScript to show and hide the
groups by updating the dataset.
</div>
<br />
<div id="Legend" class="externalLegend"></div>
<div id="visualization"></div>
<script type="text/javascript">
// create a dataSet with groups
var names = ['SquareShaded', 'Bar', 'Blank', 'CircleShaded'];
var groups = new vis.DataSet();
groups.add({
id: 0,
content: names[0],
className: 'customStyle1',
options: {
drawPoints: {
style: 'square' // square, circle
},
shaded: {
orientation: 'bottom' // top, bottom
}
}});
groups.add({
id: 1,
content: names[1],
className: 'customStyle2',
options: {
style:'bar',
drawPoints: {style: 'circle',
size: 10
}
}});
groups.add({
id: 2,
content: names[2],
options: {
yAxisOrientation: 'right', // right, left
drawPoints: false
}
});
groups.add({
id: 3,
content: names[3],
className: 'customStyle3',
options: {
yAxisOrientation: 'right', // right, left
drawPoints: {
style: 'circle' // square, circle
},
shaded: {
orientation: 'top' // top, bottom
}
}});
var container = document.getElementById('visualization');
var items = [
{x: '2014-06-12', y: 0 , group: 0},
{x: '2014-06-13', y: 30, group: 0},
{x: '2014-06-14', y: 10, group: 0},
{x: '2014-06-15', y: 15, group: 1},
{x: '2014-06-16', y: 30, group: 1},
{x: '2014-06-17', y: 10, group: 1},
{x: '2014-06-18', y: 15, group: 1},
{x: '2014-06-19', y: 52, group: 1},
{x: '2014-06-20', y: 10, group: 1},
{x: '2014-06-21', y: 20, group: 2},
{x: '2014-06-22', y: 600, group: 2},
{x: '2014-06-23', y: 100, group: 2},
{x: '2014-06-24', y: 250, group: 2},
{x: '2014-06-25', y: 300, group: 2},
{x: '2014-06-26', y: 200, group: 3},
{x: '2014-06-27', y: 600, group: 3},
{x: '2014-06-28', y: 1000, group: 3},
{x: '2014-06-29', y: 250, group: 3},
{x: '2014-06-30', y: 300, group: 3}
];
var dataset = new vis.DataSet(items);
var options = {
dataAxis: {showMinorLabels: false},
start: '2014-06-09',
end: '2014-07-03'
};
var graph2d = new vis.Graph2d(container, items, options, groups);
/**
* this function fills the external legend with content using the getLegend() function.
*/
function populateExternalLegend() {
var groupsData = groups.get();
var legendDiv = document.getElementById("Legend");
legendDiv.innerHTML = "";
// get for all groups:
for (var i = 0; i < groupsData.length; i++) {
// create divs
var containerDiv = document.createElement("div");
var iconDiv = document.createElement("div");
var descriptionDiv = document.createElement("div");
// give divs classes and Ids where necessary
containerDiv.className = 'legendElementContainer';
containerDiv.id = groupsData[i].id + "_legendContainer"
iconDiv.className = "iconContainer";
descriptionDiv.className = "descriptionContainer";
// get the legend for this group.
var legend = graph2d.getLegend(groupsData[i].id,30,30);
// append class to icon. All styling classes from the vis.css have been copied over into the head here to be able to style the
// icons with the same classes if they are using the default ones.
legend.icon.setAttributeNS(null, "class", "legendIcon");
// append the legend to the corresponding divs
iconDiv.appendChild(legend.icon);
descriptionDiv.innerHTML = legend.label;
// determine the order for left and right orientation
if (legend.orientation == 'left') {
descriptionDiv.style.textAlign = "left";
containerDiv.appendChild(iconDiv);
containerDiv.appendChild(descriptionDiv);
}
else {
descriptionDiv.style.textAlign = "right";
containerDiv.appendChild(descriptionDiv);
containerDiv.appendChild(iconDiv);
}
// append to the legend container div
legendDiv.appendChild(containerDiv);
// bind click event to this legend element.
containerDiv.onclick = toggleGraph.bind(this,groupsData[i].id);
}
}
/**
* This function switchs the visible option of the selected group on an off.
* @param groupId
*/
function toggleGraph(groupId) {
// get the container that was clicked on.
var container = document.getElementById(groupId + "_legendContainer")
// if visible, hide
if (graph2d.isGroupVisible(groupId) == true) {
groups.update({id:groupId, visible:false});
container.className = container.className + " hidden";
}
else { // if invisible, show
groups.update({id:groupId, visible:true});
container.className = container.className.replace("hidden","");
}
}
populateExternalLegend()
</script>
</body>
</html>

+ 1
- 0
examples/graph2d/index.html View File

@ -15,6 +15,7 @@
<p><a href="06_interpolation.html">06_interpolation.html</a></p>
<p><a href="07_scrollingAndSorting.html">07_scrollingAndSorting.html</a></p>
<p><a href="08_performance.html">08_performance.html</a></p>
<p><a href="09_external_legend.html">09_external_legend.html</a></p>
</div>
</body>

+ 1
- 2
examples/network/02_random_nodes.html View File

@ -31,8 +31,7 @@
for (var i = 0; i < nodeCount; i++) {
nodes.push({
id: i,
label: String(i),
radius:300
label: String(i)
});
connectionCount[i] = 0;

+ 4
- 9
examples/network/06_groups.html View File

@ -64,8 +64,7 @@
edges.push({
from: from + nodeOffset,
to: to + nodeOffset,
length: len,
color: color
length: len
});
connectionCount[from]++;
connectionCount[to]++;
@ -85,8 +84,7 @@
edges.push({
from: from + nodeOffset,
to: to + nodeOffset,
length: len,
color: color
length: len
});
connectionCount[from]++;
connectionCount[to]++;
@ -112,8 +110,7 @@
edges.push({
from: from,
to: to,
length: len,
color: color
length: len
});
}
@ -135,9 +132,7 @@
nodes: {
shape: 'dot'
},
edges: {
length: 50
}
physics: {barnesHut:{springLength: 200}}
};
network = new vis.Network(container, data, options);
}

+ 1
- 1
examples/network/10_multiline_text.html View File

@ -26,7 +26,7 @@
// create some edges
var edges = [
{from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200},
{from: 1, to: 2, style: 'line', color: 'red', width: 3, length: 200}, // individual length definition is possible
{from: 1, to: 3, style: 'dash-line', width: 1, length: 200},
{from: 1, to: 4, style: 'line', width: 1, length: 200},
{from: 1, to: 5, style: 'arrow', width: 3, length: 200}

+ 1
- 1
examples/network/11_custom_style.html View File

@ -61,7 +61,6 @@
options = {
stabilize: false,
edges: {
length: 120,
width: 2,
style: 'arrow',
color: 'gray'
@ -79,6 +78,7 @@
}
}
},
physics: {barnesHut:{springLength:200}}, // this is the correct way to set the length of the springs
groups: {
black: {
// defaults for nodes in this group

+ 1
- 3
examples/network/13_dashed_lines.html View File

@ -45,9 +45,7 @@
nodes: {
shape: 'box'
},
edges: {
length: 180
},
physics: {barnesHut:{springLength:150}}, // this is the correct way to set the length of the springs
stabilize: false
};
var network = new vis.Network(container, data, options);

+ 5
- 5
examples/network/17_network_info.html View File

@ -96,11 +96,11 @@
var x = - mynetwork.clientWidth / 2 + 50;
var y = - mynetwork.clientHeight / 2 + 50;
var step = 70;
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1});
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1});
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1});
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1});
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1});
nodes.push({id: 1000, x: x, y: y, label: 'Internet', group: 'internet', value: 1, mass:0});
nodes.push({id: 1001, x: x, y: y + step, label: 'Switch', group: 'switch', value: 1, mass:0});
nodes.push({id: 1002, x: x, y: y + 2 * step, label: 'Server', group: 'server', value: 1, mass:0});
nodes.push({id: 1003, x: x, y: y + 3 * step, label: 'Computer', group: 'desktop', value: 1, mass:0});
nodes.push({id: 1004, x: x, y: y + 4 * step, label: 'Smartphone', group: 'mobile', value: 1, mass:0});
// create a network
var container = document.getElementById('mynetwork');

+ 2
- 4
examples/network/18_fully_random_nodes_clustering.html View File

@ -53,9 +53,7 @@
edges: edges
};
var options = {
edges: {
length: 80
},
physics: {barnesHut:{springLength:120}}, // this is the correct way to set the length of the springs
clustering: {
enabled: clusteringOn
},
@ -73,7 +71,7 @@
<body onload="draw();">
<h2>Clustering - Fully random network</h2>
<div style="width:700px; font-size:14px;">
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows a fully randomly generated set of nodes and connected edges.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).

+ 1
- 12
examples/network/19_scale_free_graph_clustering.html View File

@ -76,17 +76,6 @@
nodes: nodes,
edges: edges
};
/*
var options = {
nodes: {
shape: 'circle'
},
edges: {
length: 50
},
stabilize: false
};
*/
var options = {
clustering: {
enabled: clusteringOn,
@ -106,7 +95,7 @@
<body onload="draw();">
<h2>Clustering - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px;">
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
By clicking the checkbox you can turn clustering on and off. If you increase the number of nodes to
a value higher than 100, automatic clustering is used before the initial draw (assuming the checkbox is checked).

+ 1
- 15
examples/network/20_navigation.html View File

@ -94,21 +94,7 @@
nodes: nodes,
edges: edges
};
/*
var options = {
nodes: {
shape: 'circle'
},
edges: {
length: 50
},
stabilize: false
};
*/
var options = {
edges: {
length: 50
},
stabilize: false,
navigation: true,
keyboard: true
@ -125,7 +111,7 @@
<body onload="draw();">
<h2>Navigation controls and keyboad navigation</h2>
<div style="width: 700px; font-size:14px;">
<div style="width: 800px; font-size:14px; text-align: justify;">
This example is the same as example 2, except for the navigation controls that have been activated. The navigation controls are described below. <br /><br />
<table class="legend_table">
<tr>

+ 1
- 4
examples/network/21_data_manipulation.html View File

@ -114,9 +114,6 @@
edges: edges
};
var options = {
edges: {
length: 50
},
stabilize: false,
dataManipulation: true,
onAdd: function(data,callback) {
@ -194,7 +191,7 @@
<body onload="draw();">
<h2>Editing the dataset</h2>
<div style="width: 700px; font-size:14px;">
<div style="width: 700px; font-size:14px; text-align: justify;">
In this example we have enabled the data manipulation setting. If the dataManipulation option is set to true, the edit button will appear.
If you prefer to have the toolbar visible initially, you can set the initiallyVisible option to true. The exact method is described in the docs.
<br /><br />

+ 1
- 3
examples/network/23_hierarchical_layout.html View File

@ -79,8 +79,6 @@
};
var directionInput = document.getElementById("direction");
var options = {
edges: {
},
stabilize: false,
smoothCurves: false,
hierarchicalLayout: {
@ -100,7 +98,7 @@
<body onload="draw();">
<h2>Hierarchical Layout - Scale-Free-Network</h2>
<div style="width:700px; font-size:14px;">
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows the randomly generated <b>scale-free-network</b> set of nodes and connected edges from example 2.
In this example, hierarchical layout has been enabled and the vertical levels are determined automatically.
</div>

+ 1
- 1
examples/network/24_hierarchical_layout_userdefined.html View File

@ -131,7 +131,7 @@
<body onload="draw();">
<h2>Hierarchical Layout - User-defined</h2>
<div style="width:700px; font-size:14px;">
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows a user-defined hierarchical layout. If the user defines levels for nodes but does not do so for all nodes, an alert will show up and hierarchical layout will be disabled. Either all or none can be defined.
If the smooth curves appear to be inverted, the direction of the edge is not in the same direction as the network.
</div>

+ 3
- 5
examples/network/25_physics_configuration.html View File

@ -77,10 +77,8 @@
};
var options = {
edges: {
},
stabilize: false,
configurePhysics:true
stabilize: false,
configurePhysics:true
};
network = new vis.Network(container, data, options);
@ -95,7 +93,7 @@
<body onload="draw();">
<h2>Playing with Physics</h2>
<div style="width: 700px; font-size:14px;">
<div style="width: 700px; font-size:14px; text-align: justify;">
Every dataset is different. Nodes can have different sizes based on content, interconnectivity can be high or low etc. Because of this, network has a special option
that the user can use to explore which settings may be good for him or her. This is ment to be used during the development phase when you are implementing vis.js. Once you have found
settings you are happy with, you can supply them to network using the documented physics options.

+ 1
- 1
examples/network/26_staticSmoothCurves.html View File

@ -17,7 +17,7 @@
<body>
<h2>Static smooth curves</h2>
<div style="width:700px; font-size:14px;">
<div style="width:700px; font-size:14px; text-align: justify;">
All the smooth curves in the examples so far have been using dynamic smooth curves. This means that each curve has a
support node which takes part in the physics simulation. For large networks or dense clusters, this may not be the ideal
solution. To solve this, static smooth curves have been added. The static smooth curves are based only on the positions of the connected

+ 1
- 1
examples/network/30_importing_from_gephi.html View File

@ -34,7 +34,7 @@
<body>
<h2>Dynamic Data - Importing from Gephi (JSON)</h2>
<div style="width:700px; font-size:14px;">
<div style="width:700px; font-size:14px; text-align: justify;">
This example shows how to import a JSON file exported by Gephi. The two options available for the import are
available through the checkboxes. You can download the Gephi JSON exporter here:
<a href="https://marketplace.gephi.org/plugin/json-exporter/" target="_blank">https://marketplace.gephi.org/plugin/json-exporter/</a>.

+ 7
- 1
index.html View File

@ -74,7 +74,7 @@ bower install vis
<h3>download</h3>
<a href="download/vis.zip">Click here to download vis.js</a>
(version <span class="version">3.1.0</span>)
(version <span class="version">3.2.0</span>)
<h2 id="example">Example</h2>
@ -482,6 +482,12 @@ The source code of the examples can be found in the
<div>performance</div>
</a>
</div>
<div class="thumb">
<a href="examples/graph2d/09_external_legend.html">
<img src="img/gallery/graph2d/09_external_legend.png">
<div>external legend</div>
</a>
</div>
</div>

Write Preview
Loading…
Cancel
Save