|
|
- <!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>
|
