vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

466 lines
20 KiB

<!doctype html>
<html>
<head>
<title>Network | Chosen Elements</title>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#mynetwork {
width: 900px;
height: 600px;
border: 1px solid lightgray;
}
code {
font-size: 14px;
background: #dddddd;
}
p {
max-width: 600px;
}
.indented {
margin-left: 30px;
}
.sep {
height: 1px;
width: 35%;
margin-left: 40px;
background-color: #dddddd;
}
</style>
<script src="../../googleAnalytics.js"></script>
</head>
<body>
<p>When a node or edge is selected or hovered its visible characteristics can be changed.</p>
<div id="mynetwork"></div>
<p>In this network, an element (node, edge or label) will change a characteristic when hovered, and it will be locked in when selected.
This is managed by setting up a 'chosen' function that will be called when the element containing the function is chosen.
These functions may be set on nodes, edges and labels, at the individual or group level.</p>
<p>All states (unselected, hover-over-unselected, selected, and hover-over selected) may be handled as needed by the application using vis, as the select and hover states are passed to the chosen function when called.
Additionally, the id of the element is passed to allow context-specific characteristic adjustment on select or hover as needed.</p>
<p><i>It should be noted that the characteristics which might affect the position of elements have been left out on purpose.
While it might be interesting to make them changeable, this is problematic on hovering.
Consider that the user hovers over an object.
If it changed characteristics that moved it outside of the hover-distance, it would then no longer be hovering.
So it would be moved back to its original prosition, within the hover-distance and then again be hovering over the object.
This hysteresis loop is kept from occurring by leaving out the characteristics that could cause it.
Some seemingly innocuous changes (such as resizing a node's label on hover that would in turn cause the node to resize and move out of hover-distance) may still cause hysteresis, but with care they should be avoidable.</i></p>
<script type="text/javascript">
var changeChosenLabelColor =
function(ctx, values, id) {
values.color = "#ff0000";
}
var changeChosenLabelSize =
function(ctx, values, id) {
values.size += 1;
}
var changeChosenLabelFace =
function(ctx, values, id) {
values.face = "serif";
}
var changeChosenLabelMod =
function(ctx, values, id) {
values.mod = "bold italic";
}
var changeChosenLabelStrokeWidth =
function(ctx, values, id) {
values.strokeWidth = 5;
}
var changeChosenLabelStrokeColor =
function(ctx, values, id) {
values.strokeColor = "#00ff00";
}
var changeChosenNodeColor =
function(values, id, selected, hovering) {
values.color = "#ffdd88";
}
var changeChosenNodeBorderWidth =
function(values, id, selected, hovering) {
values.borderWidth = 3;
}
var changeChosenNodeBorderColor =
function(values, id, selected, hovering) {
values.borderColor = "#ff0000";
}
var changeChosenNodeSize =
function(values, id, selected, hovering) {
values.size = 30;
}
var changeChosenNodeBorderDashes =
function(values, id, selected, hovering) {
values.borderDashes = [ 10, 10 ];
}
var changeChosenNodeBorderRadius =
function(values, id, selected, hovering) {
values.borderRadius = 15;
}
var changeChosenNodeShadow =
function(values, id, selected, hovering) {
values.shadow = true;
}
var changeChosenNodeShadowColor =
function(values, id, selected, hovering) {
values.shadowColor = "#ff0000";
}
var changeChosenNodeShadowSize =
function(values, id, selected, hovering) {
values.shadowSize = 30;
}
var changeChosenNodeShadowX =
function(values, id, selected, hovering) {
values.shadowX = -5;
}
var changeChosenNodeShadowY =
function(values, id, selected, hovering) {
values.shadowY = -5;
}
var changeChosenEdgeToArrow =
function(values, id, selected, hovering) {
values.toArrow = true;
}
var changeChosenEdgeToArrowScale =
function(values, id, selected, hovering) {
values.toArrowScale = 2;
}
var changeChosenEdgeToArrowType =
function(values, id, selected, hovering) {
values.toArrowType = "circle";
}
var changeChosenEdgeMiddleArrow =
function(values, id, selected, hovering) {
values.middleArrow = true;
}
var changeChosenEdgeMiddleArrowScale =
function(values, id, selected, hovering) {
values.middleArrowScale = 2;
}
var changeChosenEdgeMiddleArrowType =
function(values, id, selected, hovering) {
values.middleArrowType = "circle";
}
var changeChosenEdgeFromArrow =
function(values, id, selected, hovering) {
values.fromArrow = true;
}
var changeChosenEdgeFromArrowScale =
function(values, id, selected, hovering) {
values.fromArrowScale = 2;
}
var changeChosenEdgeFromArrowType =
function(values, id, selected, hovering) {
values.fromArrowType = "circle";
}
var changeChosenEdgeArrowStrikethrough =
function(values, id, selected, hovering) {
values.arrowStrikethrough = false;
}
var changeChosenEdgeColor =
function(values, id, selected, hovering) {
values.color = "#00ff00";
}
var changeChosenEdgeInheritsColor =
function(values, id, selected, hovering) {
values.inheritsColor = "both";
}
var changeChosenEdgeOpacity =
function(values, id, selected, hovering) {
values.opacity = 0.25;
}
var changeChosenEdgeHidden =
function(values, id, selected, hovering) {
values.hidden = true;
}
var changeChosenEdgeShadow =
function(values, id, selected, hovering) {
values.shadow = true;
}
var changeChosenEdgeShadowColor =
function(values, id, selected, hovering) {
values.shadowColor = "#00ffff";
}
var changeChosenEdgeShadowSize =
function(values, id, selected, hovering) {
values.shadowSize = 20;
}
var changeChosenEdgeShadowX =
function(values, id, selected, hovering) {
values.shadowX = -5;
}
var changeChosenEdgeShadowY =
function(values, id, selected, hovering) {
values.shadowY = -5;
}
var changeChosenEdgeWidth =
function(values, id, selected, hovering) {
values.width = 5;
}
var changeChosenEdgeDashes =
function(values, id, selected, hovering) {
values.dashes = [10, 10];
}
var nodes = [
{ id: 1000, label: "label does not change",
x: -400, y: -300,
chosen: { label: false, node: false } },
{ id: 1010, label: "label default settings",
x: -400, y: -225,
chosen: { label: true, node: false } },
{ id: 1020, label: "label changes color",
x: -400, y: -150,
chosen: { label: changeChosenLabelColor, node: false } },
{ id: 1030, label: "label changes size",
x: -400, y: -75,
chosen: { label: changeChosenLabelSize, node: false } },
{ id: 1040, label: "label changes face",
x: -400, y: 0,
chosen: { label: changeChosenLabelFace, node: false } },
{ id: 1050, label: "label changes modifier",
x: -400, y: 75,
chosen: { label: changeChosenLabelMod, node: false } },
{ id: 1060, label: "label changes stokeWidth",
x: -400, y: 150,
chosen: { label: changeChosenLabelStrokeWidth, node: false } },
{ id: 1070, label: "label changes stokeColor",
x: -400, y: 225, font: { strokeWidth: 2 },
chosen: { label: changeChosenLabelStrokeColor, node: false } },
{ id: 2000, label: "node does not change",
x: 0, y: -300,
chosen: { label: false, node: false } },
{ id: 2010, label: "node default settings",
x: 0, y: -225,
chosen: { label: false, node: true } },
{ id: 2020, label: "node changes color",
x: 0, y: -150,
chosen: { label: false, node: changeChosenNodeColor } },
{ id: 2030, label: "node changes borderWidth",
x: 0, y: -75,
chosen: { label: false, node: changeChosenNodeBorderWidth } },
{ id: 2040, label: "node changes borderColor",
x: 0, y: 0,
chosen: { label: false, node: changeChosenNodeBorderColor } },
{ id: 2050, label: "shaped nodes change size",
x: 0, y: 70, shape: 'star',
chosen: { label: false, node: changeChosenNodeSize } },
{ id: 2051, x: -60, y: 70, shape: 'dot',
chosen: { label: false, node: changeChosenNodeSize } },
{ id: 2052, x: -120, y: 70, shape: 'diamond',
chosen: { label: false, node: changeChosenNodeSize } },
{ id: 2053, x: 60, y: 70, shape: 'square',
chosen: { label: false, node: changeChosenNodeSize } },
{ id: 2054, x: 120, y: 70, shape: 'triangle',
chosen: { label: false, node: changeChosenNodeSize } },
{ id: 2055, x: 165, y: 70, shape: 'triangleDown',
chosen: { label: false, node: changeChosenNodeSize } },
{ id: 2060, label: "node changes borderDashes",
x: 0, y: 150,
chosen: { label: false, node: changeChosenNodeBorderDashes } },
{ id: 2070, label: "node changes borderRadius",
x: 0, y: 225,
chosen: { label: false, node: changeChosenNodeBorderRadius } },
{ id: 2080, label: "node changes shadow",
x: 0, y: 300,
chosen: { label: false, node: changeChosenNodeShadow } },
{ id: 2090, label: "node changes shadowColor",
x: 0, y: 375, shadow: true,
chosen: { label: false, node: changeChosenNodeShadowColor } },
{ id: 2100, label: "node changes shadowSize",
x: 0, y: 450, shadow: true,
chosen: { label: false, node: changeChosenNodeShadowSize } },
{ id: 2110, label: "node changes shadowX",
x: 0, y: 525, shadow: true,
chosen: { label: false, node: changeChosenNodeShadowX } },
{ id: 2120, label: "node changes shadowY",
x: 0, y: 600, shadow: true,
chosen: { label: false, node: changeChosenNodeShadowY } },
{ id: 3000, x: 275, y: -310, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3001, x: 525, y: -210, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3010, x: 275, y: -235, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3011, x: 525, y: -135, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3020, x: 275, y: -160, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3021, x: 525, y: -60, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3030, x: 275, y: -85, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3031, x: 525, y: 15, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3040, x: 275, y: -10, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3041, x: 525, y: 90, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3050, x: 275, y: 65, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3051, x: 525, y: 165, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3060, x: 275, y: 140, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3061, x: 525, y: 240, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3070, x: 275, y: 215, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3071, x: 525, y: 315, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3080, x: 275, y: 290, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0},
{ id: 3081, x: 525, y: 390, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3090, x: 275, y: 365, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3091, x: 525, y: 465, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3100, x: 275, y: 440, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3101, x: 525, y: 540, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3110, x: 275, y: 515, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3111, x: 525, y: 615, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3120, x: 575, y: -310, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3121, x: 825, y: -210, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3130, x: 575, y: -235, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3131, x: 825, y: -135, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3140, x: 575, y: -160, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3141, x: 825, y: -60, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3150, x: 575, y: -85, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3151, x: 825, y: 15, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3160, x: 575, y: -10, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3161, x: 825, y: 90, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3170, x: 575, y: 65, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3171, x: 825, y: 165, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3180, x: 575, y: 140, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3181, x: 825, y: 240, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3190, x: 575, y: 215, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3191, x: 825, y: 315, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3200, x: 575, y: 290, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3201, x: 825, y: 390, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3210, x: 575, y: 365, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3211, x: 825, y: 465, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
{ id: 3220, x: 575, y: 440, chosen: false, shape: "dot", size: 10, color: "#dd6644", borderWidth: 0 },
{ id: 3221, x: 825, y: 540, chosen: false, shape: "dot", size: 10, color: "#6699dd", borderWidth: 0 },
];
var edges = [
{ id: 4000, from: 3000, to: 3001, label: "edge does not change",
chosen: false },
{ id: 4010, from: 3010, to: 3011, label: "edge has default settings",
chosen: { label: false, edge: true } },
{ id: 4020, from: 3020, to: 3021, label: "edge changes toArrow",
chosen: { label: false, edge: changeChosenEdgeToArrow } },
{ id: 4030, from: 3030, to: 3031, label: "edge changes toArrowScale",
arrows: { to: true },
chosen: { label: false, edge: changeChosenEdgeToArrowScale } },
{ id: 4040, from: 3040, to: 3041, label: "edge changes toArrowType",
arrows: { to: true },
chosen: { label: false, edge: changeChosenEdgeToArrowType } },
{ id: 4050, from: 3050, to: 3051, label: "edge changes middleArrow",
chosen: { label: false, edge: changeChosenEdgeMiddleArrow } },
{ id: 4060, from: 3060, to: 3061, label: "edge changes middleArrowScale",
arrows: { middle: true },
chosen: { label: false, edge: changeChosenEdgeMiddleArrowScale } },
{ id: 4070, from: 3070, to: 3071, label: "edge changes middleArrowType",
arrows: { middle: true },
chosen: { label: false, edge: changeChosenEdgeMiddleArrowType } },
{ id: 4080, from: 3080, to: 3081, label: "edge changes fromArrow",
chosen: { label: false, edge: changeChosenEdgeFromArrow } },
{ id: 4090, from: 3090, to: 3091, label: "edge changes fromArrowScale",
arrows: { from: true },
chosen: { label: false, edge: changeChosenEdgeFromArrowScale } },
{ id: 4100, from: 3100, to: 3101, label: "edge changes fromArrowType",
arrows: { from: true },
chosen: { label: false, edge: changeChosenEdgeFromArrowType } },
{ id: 4110, from: 3110, to: 3111, label: "edge changes arrowStrikethrough",
arrows: { to: true, from: true }, width: 7,
chosen: { label: false, edge: changeChosenEdgeArrowStrikethrough } },
{ id: 4120, from: 3120, to: 3121, label: "edge changes color",
chosen: { label: false, edge: changeChosenEdgeColor } },
{ id: 4130, from: 3130, to: 3131, label: "edge inherits color",
chosen: { label: false, edge: changeChosenEdgeInheritsColor } },
{ id: 4140, from: 3140, to: 3141, label: "edge changes opacity",
chosen: { label: false, edge: changeChosenEdgeOpacity } },
{ id: 4150, from: 3150, to: 3151, label: "edge changes hidden",
chosen: { label: false, edge: changeChosenEdgeHidden } },
{ id: 4160, from: 3160, to: 3161, label: "edge changes shadow",
width: 7,
chosen: { label: false, edge: changeChosenEdgeShadow } },
{ id: 4170, from: 3170, to: 3171, label: "edge changes shadowColor",
shadow: true, width: 7,
chosen: { label: false, edge: changeChosenEdgeShadowColor } },
{ id: 4180, from: 3180, to: 3181, label: "edge changes shadowSize",
shadow: true, width: 7,
chosen: { label: false, edge: changeChosenEdgeShadowSize } },
{ id: 4190, from: 3190, to: 3191, label: "edge changes shadowX",
shadow: true, width: 7,
chosen: { label: false, edge: changeChosenEdgeShadowX } },
{ id: 4200, from: 3200, to: 3201, label: "edge changes shadowY",
shadow: true, width: 7,
chosen: { label: false, edge: changeChosenEdgeShadowY } },
{ id: 4210, from: 3210, to: 3211, label: "edge changes width",
chosen: { label: false, edge: changeChosenEdgeWidth } },
{ id: 4220, from: 3220, to: 3221, label: "edge changes dashes",
chosen: { label: false, edge: changeChosenEdgeDashes } },
];
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {
edges: {
font: {
size: 16
},
selfReferenceSize: 30
},
nodes: {
shape: 'box',
widthConstraint: 250,
color: "#cccccc",
margin: 10,
font: {
size: 16
}
},
physics: {
enabled: false
},
interaction: {
hover: true
}
};
var network = new vis.Network(container, data, options);
</script>
</body>
</html>