SpacingZoom Directive - GoJS

SpacingZoom Directive - GoJS - javascript

Here is my Plunker
The above Plunker is a basic example for connecting the nodes followed by the Links.
I would like to update my Plunker directive in order to add the SpacingZoom. Here is the example
The example is given for SpacingZoom in GoJS official website using javascript. I want that to be converted into an angular directive.
Here is my code
scripts.js
var app = angular.module('app', []);
app.directive('goDiagram', function($http) {
return {
restrict: 'E',
template: '<div></div>',
replace: true,
scope: {
model: '=goModel'
},
link: function(scope, element, attrs) {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
var $ = go.GraphObject.make;
var rainbow = $(go.Brush, "Linear", {
0: "red",
1: "green"
});
var diagram = $(go.Diagram, element[0], {
nodeTemplate: $(go.Node, "Auto", {
locationSpot: go.Spot.Center
}, {
width: 120,
height: 15,
locationSpot: go.Spot.Center
},
new go.Binding("location"),
$(go.Shape, {
fill: "#e74c3c",
stroke: '#c0392b'
}, {
portId: "",
cursor: "pointer",
strokeWidth: 0,
}),
$(go.TextBlock, {
margin: 0,
stroke: "#eee"
},
new go.Binding("text", "key")
)
),
linkTemplate: $(go.Link, {
// routing: go.Link.AvoidsNodes,
reshapable: true,
resegmentable: true
},
$(go.Shape,
{ strokeWidth: 3 , stroke: rainbow },
// new go.Binding("stroke", rainbow),
),
$(go.Shape, {
toArrow: "Standard"
}),
),
});
function updateAngular(e) {
if (e.isTransactionFinished) {
scope.$apply();
}
}
function updateSelection(e) {
diagram.model.selectedNodeData = null;
var it = diagram.selection.iterator;
while (it.next()) {
var selnode = it.value;
// ignore a selected link or a deleted node
if (selnode instanceof go.Node && selnode.data !== null) {
diagram.model.selectedNodeData = selnode.data;
break;
}
}
scope.$apply();
}
// watch scope
scope.$watch("model", function(newmodel) {
if (newmodel != undefined) {
var oldmodel = diagram.model;
if (oldmodel !== newmodel) {
diagram.removeDiagramListener("ChangedSelection", updateSelection);
diagram.model = newmodel;
diagram.addDiagramListener("ChangedSelection", updateSelection);
}
}
});
}
}
});
app.controller('appController', function($scope) {
$scope.init = function(d) {
$scope.hello = "Hello Plunker!!!!";
$scope.model = new go.GraphLinksModel(
[{
key: "Alpha",
color: "lightblue",
location: new go.Point(150, 130)
}, {
key: "Beta",
color: "orange",
location: new go.Point(350, 180)
}, {
key: "Gamma",
color: "lightgreen",
location: new go.Point(150, 230)
}, {
key: "Delta",
color: "pink"
}], [{
from: "Alpha",
to: "Beta",
inColor: "red",
outColor: "blue"
}, {
from: "Alpha",
to: "Gamma",
inColor: "yellow",
outColor: "blue"
}, {
from: "Beta",
to: "Gamma",
inColor: "green",
outColor: "pink"
}, {
from: "Gamma",
to: "Delta",
inColor: "black",
outColor: "red"
}, {
from: "Delta",
to: "Alpha",
inColor: "violet",
outColor: "green"
}]);
$scope.model.selectedNodeData = null;
}
});
index.html
<!DOCTYPE html>
<html ng-app="app">
<head>
<script data-require="angular.js#1.5.10" data-semver="1.5.10" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script>
<script data-require="angular-route#1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular-route.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="https://gojs.net/latest/release/go.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="appController">
<div ng-init="init()">
<h1>{{hello}}</h1>
<go-diagram go-model="model" style="border: solid 1px black; width:100%; height:400px"></go-diagram>
</div>
</body>
</html>
Need one more solution, From the connected chart you can see the Links from Delta to Gamma, the line is drawing above the Alpha Node. I don't want to the lines to be drawn any of the nodes.

Related

React-Chart.js : How do I increase the space between the legends and chart?

There are a couple of questions that run along the same lines as mine. However, these questions focus on simply chart.js. I have a similar problem but on react-chart.js. How do I increase the space between the legend and chart? I have used padding but it only increases the space between the legends. Not quite what I wanted. Below is my doughnut chart component.
<div className="dougnut-chart-container">
<Doughnut
className="doughnut-chart"
data={
{
labels: ["a", "b", "c", "d", "e", "f"],
datasets: [
{
label: "Title",
data: [12821, 34581, 21587, 38452, 34831, 48312],
backgroundColor: [
'rgb(61, 85, 69)',
'rgb(115, 71, 71)',
'rgb(166, 178, 174)',
'rgb(209, 191, 169)',
'rgb(66, 63, 62)',
'rgb(43, 43, 43)',
]
}
],
}
}
options={
{
plugins: {
legend: {
labels: {
color: "white",
font: {
size: 12
},
padding: 10,
},
position: "left",
title: {
display: true,
text: "Title",
color: "grey",
padding: 10
}
}
},
elements: {
arc: {
borderWidth: 0
}
},
responsive: true,
maintainAspectRatio: true,
}
}
/>
</div>
What my chart looks like:

You can write a custom plugin as showed by this answer, but instead of adding some extra space to the height you will need to add some extra spacing to the width of the legend boxes:
var options = {
type: 'doughnut',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
datasets: [{
label: '# of Votes',
data: [12, 19, 3, 5, 2, 3],
backgroundColor: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
}]
},
options: {
plugins: {
legend: {
position: 'left'
},
legendDistance: {
padding: 50
}
}
},
plugins: [{
id: 'legendDistance',
beforeInit(chart, args, opts) {
// Get reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
// Change the height as suggested in another answers
this.width += opts.padding || 0;
}
}
}]
}
var ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
<canvas id="chartJSContainer" width="600" height="400"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.0/chart.js"></script>
</body>

This answer suggested by #LeeLenalee works for me. But for those who are confused and wants to see this integrated in their components, here is what I did:
<div className="dougnut-chart-container">
<Doughnut
className="doughnut-chart"
data={
{
labels: ["label_1", "label_2", "label_3", "label_4", "label_5", "label_6"],
datasets: [
{
label: "Title",
data: [12821, 34581, 21587, 38452, 34831, 48312],
backgroundColor: [
'rgb(61, 85, 69)',
'rgb(115, 71, 71)',
'rgb(166, 178, 174)',
'rgb(209, 191, 169)',
'rgb(66, 63, 62)',
'rgb(43, 43, 43)',
]
}
],
}
}
options={
{
plugins: {
legend: {
labels: {
color: "white",
font: {
size: 12
},
padding: 10,
},
title: {
display: true,
text: "A Longer Title To Occupy Space",
color: "grey",
padding: {
bottom: 10
},
font: {
size: 13
}
},
position: "left"
},
// this is the id that is specified below
legendDistance: {
padding: 130 // dictates the space
}
},
elements: {
arc: {
borderWidth: 0
}
},
responsive: true,
maintainAspectRatio: true,
}
}
plugins={
[
{
id: 'legendDistance',
beforeInit(chart, args, opts) {
// Get reference to the original fit function
const originalFit = chart.legend.fit;
// Override the fit function
chart.legend.fit = function fit() {
// Call original function and bind scope in order to use `this` correctly inside it
originalFit.bind(chart.legend)();
// Specify what you want to change, whether the height or width
this.width += opts.padding || 0;
}
}
}
]
}
/>
</div>
This is the result: result
Take note: You need to reload your page to see the changes.

for react you can try this code ->
const legendMargin = {
id: "legendMargin",
beforeInit: function (chart) {
const fitValue = chart.legend.fit;
chart.legend.fit = function fit() {
fitValue.bind(chart.legend)();
return (this.height += 40);
};
}
};
then just need to pass legendMargin as a props like this way
<Bar options={options} data={data} plugins={[legendMargin]} />

not working to update node of network graph

i'm using highchart to draw network graph.
and i want to change node's color.
my code to update node is
highchart.series[0].nodes[5].update({color: '#ff0000'});
it seem to work, but i get error like this.
Uncaught TypeError: Cannot read property 'concat' of undefined
at t.setNodeState [as setState]
i guess it's not working
when i update edge's node(has no "from or to" link) and move mouse on graph.
how i can update node's color?
enter image description here
const graphData = [
{from: 'Root', to: 'Group1'},
{from: 'Group1', to: 'Group1-1'},
{from: 'Group1-1', to: 'file1-1-1'},
{from: 'file1-1-1', to: 'asset1-1-1'},
{from: 'file1-1-1', to: 'asset1-1-2'},
];
const nodeData = [
{ id: 'Root', color: '#000000'},
{ id: 'Group1', color: '#00ff00' },
{ id: 'Group1-1', color: '#00ff00' },
{ id: 'file1-1-1', color: '#0000ff' },
{ id: 'asset1-1-1', color: '#d0d0d0' },
{ id: 'asset1-1-2', color: '#d0d0d0' },
];
const highchart = Highcharts.chart('highchart', {
chart: {
type: 'networkgraph',
plotBorderWidth: 1,
backgroundColor: 'transparent',
},
title: {
text: undefined
},
plotOptions: {
networkgraph: {
keys: ['from', 'to'],
layoutAlgorithm: {
enableSimulation: true,
linkLength: 100,
integration: 'verlet', // "euler"
},
link: {
width: 1,
color: '#B1B1B0',
dashStyle: 'Dash'
},
dataLabels: {
enabled: true,
y: -1,
style: {
fontSize: 10,
fontFamily: 'NotoSans-SemiBold',
textOutline: false
},
inside: false, // text 반전
textPath: {
enabled: false // circle 에 맞춰 text 곡선처리
},
linkTextPath: {
enabled: false
},
linkFormat: '',
},
point: {
events: {
update: function(param){
console.log('update', param)
}
}
}
},
},
tooltip: {
enabled: false
},
series: [{
name: 'Root',
id: 'Root',
allowPointSelect: true,
data: graphData,
nodes: nodeData,
}]
});
$('#btn').on('click', function(){
highchart.series[0].nodes[5].update({marker: {
fillcolor: '#ff0000'
}});
});
#highchart {
width: 500px;
height: 500px;
background: #f0f0f0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/8.2.2/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/networkgraph.js"></script>
<button id="btn">update</button>
<div id="highchart"></div>

The update feature doesn't exist for the nodes. It works for the points - https://api.highcharts.com/class-reference/Highcharts.Point#update
However, you can change the point color in this way:
highchart.series[0].nodes[5].graphic.css({
fill: 'red'
})
Demo: https://jsfiddle.net/BlackLabel/0Lwuce7q/

Conditionally change link color?

I am attempting to change link colors in my GoJS tree depending on a key / value pair in my model data (color, in this case). I am attempting to call my method to change the link color by doing the following:
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.Orthogonal, corner: 5, toShortLength: -2, fromShortLength: -2 },
$(go.Shape, { strokeWidth: 2, stroke: colors["gray"] },
new go.Binding("geometry", "color", setLinkColor))); // the link shape and color
However, my setLinkColor method is never called. Here it is for reference:
function setLinkColor(color) {
console.log("value of color: ", color);
switch(color) {
case "critical":
link = go.Shape.stroke(colors["orange"]);
break;
default:
link = go.Shape.stroke(colors["white"]);
}
return link;
}
How can I conditionally color my Links depending on the value of color?
UPDATE
I have tried implementing Walter's suggestion as follows:
var linkColors = {true: colors["orange"], false: colors["white"]};
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "critical", function(c) { return linkColors[c] || colors["orange"]; })),
myDiagram.model = new go.GraphLinksModel(
[
{ key: 2, geo: "thing1", color: colors["white"], critical: false },
{ key: 3, geo: "thing2", color: "#F47321", critical: true },
{ key: 4, geo: "thing3", color: colors["white"], critical: false },
{ key: 5, geo: "thing4", color: colors["white"], critical: false },
However this still is not coloring the links, what am I doing wrong?

function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{ "undoManager.isEnabled": true });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white", portId: "" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text"))
);
var myColors = { "A": "red", "B": "green", "C": "blue" };
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; })),
$(go.Shape, { toArrow: "OpenTriangle", strokeWidth: 2 },
new go.Binding("stroke", "color", function(c) { return myColors[c] || "blue"; }))
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue" },
{ key: 2, text: "Beta", color: "orange" },
{ key: 3, text: "Gamma", color: "lightgreen" },
{ key: 4, text: "Delta", color: "pink" }
],
[
{ from: 1, to: 2, color: "A" },
{ from: 1, to: 3, color: "B" },
{ from: 2, to: 2 },
{ from: 3, to: 4, color: "C" },
{ from: 4, to: 1, color: "D" }
]);
}
function test() {
myDiagram.model.commit(function(m) {
m.set(m.linkDataArray[0], "color", "B");
});
}
The link template shows one way of binding the link path's stroke color to the value of the link's data.color property lookup of a CSS color in the myColors object.
The test function shows one way of modifying the color of the first link. More discussion is at https://gojs.net/latest/learn/graphObject.html

How to pass the fetched node data from directive to controller

topology.controller.js
define(['app/topology/topology.module','app/topology/topology.services', 'app/topology/topology.directives'], function(topology, service) {
topology.controller('TopologyCtrl', ['$scope', '$rootScope', '$location', 'NetworkTopologySvc' , function ($scope, $rootScope, $location, NetworkTopologySvc) {
$rootScope['section_logo'] = 'assets/images/logo_topology.gif';
var graphRenderer = null;
$scope.createTopology = function() {
NetworkTopologySvc.getNode("flow:1", function(data) {
$scope.topologyData = data;
});
};
$scope.createTopology();
}]);
});
topology.directives.js
define(['app/topology/topology.module', 'vis'], function(topology, vis) {
topology.directive('topologySimple', function() {
// constants
var width = 800,
height = 800;
return {
restrict: 'E',
scope: {
topologyData: '='
},
link: function($scope, iElm, iAttrs, controller, $window, $location) {
$scope.$watch('topologyData', function (ntdata) {
if(ntdata){
// visinit(inNodes, inEdges, container, inOptions) {
var inNodes = $scope.topologyData.nodes;
var inEdges = $scope.topologyData.links;
var container = iElm[0];
// legend moved to topology controller
var data = {
nodes: inNodes,
edges: inEdges
};
var color = '#66FFFF',
hl = '#0066FF',
hover = '#33CC33',
BLACK = '#2B1B17';
var options =
{
width: '100%',
height: '750px',
nodes: {
widthMin: 20,
widthMax: 64,
fontColor: BLACK
},
edges: {
length: 80,
color: {
color: '#070707',
highlight: hl,
hover: hover
}
},
physics: {
barnesHut: {
gravitationalConstant: -7025
}
},
hover: true,
groups: {
'switch': {
shape: 'image',
image: 'assets/images/Device_switch_3062_unknown_64.png'
},
'host': {
shape: 'image',
image: 'assets/images/Device_pc_3045_default_64.png'
}
},
keyboard:true,
tooltip: {
delay: 300,
fontColor: "black",
fontSize: 14, // px
fontFace: "verdana",
color: {
border: "#666",
background: "#FFFFC6"
}
}
};
var graph = new vis.Graph(container, data, options);
return graph.on("click", function (params) {
console.log(params);
});
}
});
}
};
});
});
How to send the data received into 'params' to controller.
The params contains :
"nodes": [1,2],
"links": [3,4]
Please help me with this.
Any help would be appreciated.

You have several ways to do so.
using service or factory, but you can also pass data using $rootScope - not a good practice. simple $rootScope example:
in directive:
$rootScope.nodes = nodes;
and you can simple access them at your controller:

GoJs Is it possible to have multipe layouts in one diagram

I want to have a diagram which has vertical and horizontal layout in the same diagram. How can I achieve this in gojs?

There are many ways in which you can achieve your goal. I can think of three off-hand. In decreasing order of work:
Create a custom Layout that does what you want. This is the most general and can be the most compatible with the data structures that you have used with your two existing diagrams that you want to combine.
In your case you might be able to use the TableLayout that is in the extensions directory: http://gojs.net/latest/extensions/Table.html. You probably could continue to use Groups, but you would set their Group.layout to null so that they are completely ignored when the layout is performed.
Put everything in one of your existing diagrams into a Group and put everything from your other existing diagram into another Group. The Diagram.layout of the first would be the Group.layout of the first group, and the Diagram.layout of the second diagram would be the Group.layout of the second group.
Note that each Diagram can have exactly one Model (the Diagram.model), so for all three techniques you would need to add all of the data into a single model without getting references between them confused. That means you need to make sure the keys for the nodes are all unique.
Here's an example of how you can put two separate diagrams into a single diagram using the third technique. I'll start with two copies of the Minimal sample, http://gojs.net/latest/samples/minimal.html, where the only change is that one has a ForceDirectedLayout and the other one has a LayeredDigraphLayout. So one will be defined:
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.ForceDirectedLayout),
"undoManager.isEnabled": true
});
and the other will be defined:
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.LayeredDigraphLayout),
"undoManager.isEnabled": true
});
But otherwise these two diagrams are exactly like the Minimal sample.
Initially each model of Minimal is created by:
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" }
]);
So, we first need to create a combined model that is the two models added together. One way to put them together is:
myDiagram.model = new go.GraphLinksModel(
[
{ key: "Alpha", color: "lightblue" },
{ key: "Beta", color: "orange" },
{ key: "Gamma", color: "lightgreen" },
{ key: "Delta", color: "pink" },
{ key: "Alpha2", color: "lightblue" },
{ key: "Beta2", color: "orange" },
{ key: "Gamma2", color: "lightgreen" },
{ key: "Delta2", color: "pink" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" },
{ from: "Alpha2", to: "Beta2" },
{ from: "Alpha2", to: "Gamma2" },
{ from: "Beta2", to: "Beta2" },
{ from: "Gamma2", to: "Delta2" },
{ from: "Delta2", to: "Alpha2" }
]);
Again, I'll mention that this is work you would need to do no matter which technique you used. Presumably you have already done this and are just wondering how to handle two layouts.
The third technique I suggested uses Groups to encapsulate what had originally been in a whole Diagram. So let us add two groups to the model and assign each of the original nodes to the corresponding group:
myDiagram.model = new go.GraphLinksModel(
[
{ key: "FD", isGroup: true, category: "FD" }, // NEW
{ key: "LD", isGroup: true, category: "LD" }, // NEW
{ key: "Alpha", color: "lightblue", group: "FD" },
{ key: "Beta", color: "orange", group: "FD" },
{ key: "Gamma", color: "lightgreen", group: "FD" },
{ key: "Delta", color: "pink", group: "FD" },
{ key: "Alpha2", color: "lightblue", group: "LD" },
{ key: "Beta2", color: "orange", group: "LD" },
{ key: "Gamma2", color: "lightgreen", group: "LD" },
{ key: "Delta2", color: "pink", group: "LD" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" },
{ from: "Alpha2", to: "Beta2" },
{ from: "Alpha2", to: "Gamma2" },
{ from: "Beta2", to: "Beta2" },
{ from: "Gamma2", to: "Delta2" },
{ from: "Delta2", to: "Alpha2" }
]);
Now we just need to define each group/category/template:
myDiagram.groupTemplateMap.add("FD",
$(go.Group, "Auto",
{ layout: $(go.ForceDirectedLayout) },
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
));
myDiagram.groupTemplateMap.add("LD",
$(go.Group, "Auto",
{ layout: $(go.LayeredDigraphLayout) },
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
));
For the purposes of this demonstration the details of the visual appearance of each kind of group does not matter, just as the details of the appearances of the nodes and links do not matter. What does matter to you is that one group template uses one layout and the other uses a different one, there are two group data objects, and all the node data is assigned to the appropriate group.
In this case each group template is being used as a singleton, but perhaps your requirements will result in using more than one of any or all of the group templates.
Now you just need to specify the Diagram.layout to control how the two groups are arranged relative to each other. Perhaps the simplest would be to use a GridLayout:
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.GridLayout, { wrappingColumn: 1 }),
"undoManager.isEnabled": true
});
You can of course customize the layout in whatever manner you need, including using a completely different or custom layout.
Here's the complete code. For brevity I have removed a bunch of comments from the original Minimal sample:
<!DOCTYPE html>
<html>
<head>
<title>Combining 2 Diagrams with Different Layouts</title>
<!-- Copyright 1998-2016 by Northwoods Software Corporation. -->
<meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.6.5/go.js"></script>
<script id="code">
function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(go.GridLayout, { wrappingColumn: 1 }),
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle",
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 3 },
new go.Binding("text", "key"))
);
myDiagram.groupTemplateMap.add("FD",
$(go.Group, "Auto",
{ layout: $(go.ForceDirectedLayout) },
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
));
myDiagram.groupTemplateMap.add("LD",
$(go.Group, "Auto",
{ layout: $(go.LayeredDigraphLayout) },
$(go.Shape, { fill: "white", stroke: "lightgray" }),
$(go.Placeholder, { padding: 10 })
));
myDiagram.model = new go.GraphLinksModel(
[
{ key: "FD", isGroup: true, category: "FD" },
{ key: "LD", isGroup: true, category: "LD" },
{ key: "Alpha", color: "lightblue", group: "FD" },
{ key: "Beta", color: "orange", group: "FD" },
{ key: "Gamma", color: "lightgreen", group: "FD" },
{ key: "Delta", color: "pink", group: "FD" },
{ key: "Alpha2", color: "lightblue", group: "LD" },
{ key: "Beta2", color: "orange", group: "LD" },
{ key: "Gamma2", color: "lightgreen", group: "LD" },
{ key: "Delta2", color: "pink", group: "LD" }
],
[
{ from: "Alpha", to: "Beta" },
{ from: "Alpha", to: "Gamma" },
{ from: "Beta", to: "Beta" },
{ from: "Gamma", to: "Delta" },
{ from: "Delta", to: "Alpha" },
{ from: "Alpha2", to: "Beta2" },
{ from: "Alpha2", to: "Gamma2" },
{ from: "Beta2", to: "Beta2" },
{ from: "Gamma2", to: "Delta2" },
{ from: "Delta2", to: "Alpha2" }
]);
}
</script>
</head>
<body onload="init();">
<div id="sample">
<div id="myDiagramDiv" style="border: solid 1px black; width:400px; height:600px"></div>
</div>
</body>
</html>

I am new to GoJs but i tried this one.
Hope it helps :)
var $ = go.GraphObject.make;
//model
var myDiagram1 =
$(go.Diagram, "myNormal", {
initialContentAlignment: go.Spot.Center,
"undoManager.isEnabled": true // enable Ctrl-Z to undo and Ctrl-Y to redo
});
// define a simple Node template
myDiagram1.nodeTemplate =
$(go.Node, "Horizontal",
// the entire node will have a light-blue background
{
background: "#44CCFF"
},
$(go.Picture,
// Pictures should normally have an explicit width and height.
// This picture has a red background, only visible when there is no source set
// or when the image is partially transparent.
{
margin: 10,
width: 50,
height: 50,
background: "red"
},
// Picture.source is data bound to the "source" attribute of the model data
new go.Binding("source")),
$(go.TextBlock,
"Default Text", // the initial value for TextBlock.text
// some room around the text, a larger font, and a white stroke:
{
margin: 12,
stroke: "white",
font: "bold 16px sans-serif"
},
// TextBlock.text is data bound to the "name" attribute of the model data
new go.Binding("text", "name"))
);
var model = $(go.Model);
model.nodeDataArray = [ // note that each node data object holds whatever properties it needs;
// for this app we add the "name" and "source" properties
{
name: "Don Meow",
source: "cat1.png"
},
{
name: "Copricat",
source: "cat2.png"
},
{
name: "Demeter",
source: "cat3.png"
},
{ /* Empty node data */ }
];
myDiagram1.model = model;
// graph link model
var myDiagram2 =
$(go.Diagram, "graphlinksmodel", {
initialContentAlignment: go.Spot.Right,
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{
angle: 90,
layerSpacing: 35
})
});
// the template we defined earlier
myDiagram2.nodeTemplate =
$(go.Node, "Horizontal", {
background: "#44CCFF"
},
$(go.Picture, {
margin: 10,
width: 50,
height: 50,
background: "red"
},
new go.Binding("source")),
$(go.TextBlock, "Default Text", {
margin: 12,
stroke: "white",
font: "bold 16px sans-serif"
},
new go.Binding("text", "name"))
);
// define a Link template that routes orthogonally, with no arrowhead
myDiagram2.linkTemplate =
$(go.Link, {
routing: go.Link.Orthogonal,
corner: 5
},
$(go.Shape, {
strokeWidth: 3,
stroke: "#555"
})); // the link shape
var model = $(go.GraphLinksModel);
model.nodeDataArray = [{
key: "1",
name: "Don Meow",
source: "cat1.png"
},
{
key: "2",
name: "Demeter",
source: "cat2.png"
},
{
key: "3",
name: "Copricat",
source: "cat3.png"
},
{
key: "4",
name: "Jellylorum",
source: "cat4.png"
},
{
key: "5",
name: "Alonzo",
source: "cat5.png"
},
{
key: "6",
name: "Munkustrap",
source: "cat6.png"
}
];
model.linkDataArray = [{
from: "1",
to: "2"
},
{
from: "1",
to: "3"
},
{
from: "3",
to: "4"
},
{
from: "3",
to: "5"
},
{
from: "2",
to: "6"
}
];
myDiagram2.model = model;
//tree model
var myDiagram =
$(go.Diagram, "treemodel", {
"undoManager.isEnabled": true, // enable Ctrl-Z to undo and Ctrl-Y to redo
layout: $(go.TreeLayout, // specify a Diagram.layout that arranges trees
{
angle: 90,
layerSpacing: 35
})
});
// the template we defined earlier
myDiagram.nodeTemplate =
$(go.Node, "Horizontal", {
background: "#44CCFF"
},
$(go.Picture, {
margin: 10,
width: 50,
height: 50,
background: "red"
},
new go.Binding("source")),
$(go.TextBlock, "Default Text", {
margin: 12,
stroke: "white",
font: "bold 16px sans-serif"
},
new go.Binding("text", "name"))
);
// define a Link template that routes orthogonally, with no arrowhead
myDiagram.linkTemplate =
$(go.Link, {
routing: go.Link.Orthogonal,
corner: 5
},
$(go.Shape, {
strokeWidth: 3,
stroke: "#555"
})); // the link shape
var model = $(go.TreeModel);
model.nodeDataArray = [{
key: "1",
name: "Don Meow",
source: "cat1.png"
},
{
key: "2",
parent: "1",
name: "Demeter",
source: "cat2.png"
},
{
key: "3",
parent: "1",
name: "Copricat",
source: "cat3.png"
},
{
key: "4",
parent: "3",
name: "Jellylorum",
source: "cat4.png"
},
{
key: "5",
parent: "3",
name: "Alonzo",
source: "cat5.png"
},
{
key: "6",
parent: "2",
name: "Munkustrap",
source: "cat6.png"
}
];
myDiagram.model = model;
<!DOCTYPE html>
<!-- HTML5 document type -->
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
</head>
<body>
<!-- The DIV for a Diagram needs an explicit size or else we will not see anything.
In this case we also add a background color so we can see that area. -->
<div class="container-fluid">
<div class="row">
<div class="col align-self-center" id="myNormal" style="width:400px; height:200px; background-color: #DAE4E4;"></div>
</div>
<div class="row">
<div class="col" id="graphlinksmodel" style="width:600px; height:300px; background-color: rgb(142, 236, 101);"></div>
<div class="col" id="treemodel" style="width:600px; height:300px; background-color: rgb(231, 243, 177);"></div>
</div>
</div>
<!-- use go-debug.js when developing and go.js when deploying -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/1.8.21/go-debug.js"></script>
<script src="./base.js"></script>
</body>
</html>

Develop Reference

JavaScript is the programming language of the Web.

SpacingZoom Directive - GoJS - javascript

Related

React-Chart.js : How do I increase the space between the legends and chart?

not working to update node of network graph

Conditionally change link color?

How to pass the fetched node data from directive to controller

GoJs Is it possible to have multipe layouts in one diagram

Categories

Resources