I could not understand why this simple network configuration keeps spinning around node 2, except after some nudges around 30s mark in this screen cast, after which it restarts spinning. The setup uses visjs network module with forceatlas2 resolver.
My options param for the Network constructor is as follows:
get options(): Options {
return (
this.optionS || {
nodes: {
shape: 'dot',
size: 30,
font: {
size: 32
},
borderWidth: 2,
shadow: true
},
edges: {
width: 2,
shadow: true,
smooth: {
enabled: true,
roundness: 0.5,
type: 'cubicBezier',
forceDirection: 'vertical'
}
},
physics: {
forceAtlas2Based: {
avoidOverlap: 0.25,
gravitationalConstant: -95,
centralGravity: 0.01,
springLength: 100,
springConstant: 0.19,
nodeDistance: 175,
damping: 0.11
},
minVelocity: 0.75,
solver: 'forceAtlas2Based'
}
}
);
}
The host angular component provides these 5 nodes:
const nodes = new DataSet([
{ id: 1, label: 'Node 1' },
{ id: 2, label: 'Node 2' },
{ id: 3, label: 'Node 3' },
{ id: 4, label: 'Node 4' },
{ id: 5, label: 'Node 5' }
]);
const edges = new DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
]);
this.graphData = { nodes, edges };
The network directive simply instantiates the Network as follows:
this.network = new Network(
this.el.nativeElement,
this.graphData,
this.options
);
Any insight into why this sort of perennial motion happens would be appreciated. I need to understand what factors to keep in mind for generating 'stable' nodes so that users do not have to keep chasing nodes/edges to click/interact with.
Increase minVelocity or damping to stop this.
The way you configured it the physics actually never stops moving the nodes around. Nodes 1, 2, 4 and 5 are kept in star arrangement by central gravity. Node 3 then pushes node 1 away but since everything's connected it ends up moving all of the nodes. Thanks to the edge between node 1 and 3 the force is stronger in one direction than the other. This then applies never ending force on the whole arrangement which ends up slowly spinning around node 2.
Faster spinner:
Related
am look to answer this bug on Apache Echarts with vue 3 Composition API
am using apache echarts for rendering maps as a background, the maps is become from GeoJSON data of province accross my country : Source GeoJSON, the rendering process of GeoJson was successfuly as expected, but take a this code bellow, Here is problems occurs, am expected that after rendering the chart, the series that was defined is expect rendered also, but there is not yet, so whats am wrong? FYi : am need to rendr the chart and make tooltip of each province section of chart series (simplify Chloropeth Mapping), am following many guide but there is not works yet. am also referring of the official documentation of apache echart example her Chloropet Apacghe Echarts, but not working as expeccted. so is there can give me the suggestion of am wrong ? great thanks for all, looking best oppinions and suggestion from you here is my result that is not expected :
just rendered maps, not the defined series
and here is my expectation(same as example) : Expected the series is rendered in maps section and if am hovered my cursor the tooltip is show the data value of the given series;
Apache Echart COnfiguration in Vue (as reactive)
title: {
text: 'Peta Sebaran Arsiparis （2022）',
subtext: 'Open source data',
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
dataView: { readOnly: false },
restore: {},
saveAsImage: {}
}
},
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2
},
geo: {
map: "indonesia-province",
roam: true,
nameProperty: "Propinsi",
tooltip: {
show: true
},
itemStyle: {
color: '#fff'
},
emphasis: {
itemStyle: {
color: undefined,
borderColor: 'green',
borderWidth: 2
},
label: {
show: false
}
},
select: {
itemStyle: {
color: 'green'
},
label: {
show: false,
textBorderColor: '#fff',
textBorderWidth: 2
}
},
regions: generateRegions(provinceNames)
},
visualMap: {
min: 800,
max: 50000,
text: ['High', 'Low'],
realtime: false,
calculable: true,
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{ // 地图配置
name: 'Province daatatasdbashdvjk',
type: 'map',
map: 'indonesia-province', // 自定义扩展图表类型
nameProperty: "Propinsi",
geoIndex: 0,
data: generateMapData(provinceNames)
}
],
}
I'm wondering whether there is or not a way to keep the size of nodes, in a Vis.js network, always at the same size while zooming in/out
I the Options
{
size: 10,
scaling: {
min: 10,
max: 10
}
}
but this setting doesn't work at all, I also tried with
customScalingFunction: function (min,max,total,value) {
return 1;
}
thinking that this function would run any time there is a re-rendering of the network.
This can be achieved by changing the nodes.size and nodes.font.size options when the network is zoomed. Details on these options can be found in the documentation here and details on the zoom event here. As per the documentation the nodes.size option is only applicable to shapes which do not have the label inside of them.
Example snippet adjusting the size on zoom:
// create an array with nodes
let nodes = new vis.DataSet([
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2" },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" },
]);
// create an array with edges
let edges = new vis.DataSet([
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 },
{ from: 3, to: 3 },
]);
// create a network
const container = document.getElementById("mynetwork");
const data = {
nodes: nodes,
edges: edges,
};
let options = {
nodes: {
shape: 'dot',
size: 10,
font: {
size: 10
}
}
};
const network = new vis.Network(container, data, options);
// Set the initial node size once before network is drawn
network.once("beforeDrawing", function() {
setNodeSize(network.getScale());
});
// Adjust size on zoom
network.on("zoom", function (params) {
setNodeSize(params.scale);
});
function setNodeSize(scale){
// Update node size dependent on scale
options.nodes.size = (10 / scale);
options.nodes.font.size = (10 / scale);
network.setOptions(options);
}
#mynetwork {
width: 600px;
height: 160px;
border: 1px solid lightgray;
}
<script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
<div id="mynetwork"></div>
Regarding the scaling options, I don't believe they can be used to achieve this. Scaling is relative to other nodes on the network, not the viewport / zoom. A quick example to illustrate changing the scaling value is https://jsfiddle.net/34b682qs/. Clicking on the button toggles the scaling value set for each node in sequence between 10 and 20. When all nodes have the same value the network scales them all to be the same size regardless of if that value is 10 or 20. Therefore adjusting this value on zoom would have no effect.
I'm using cytoscape.js and when I try to initialize it, I found the canvas height to 0. I don't understand why.
This is my js :
var cy = cytoscape({container: document.getElementById("mapping")});
cy.add([
{group: "nodes", data: {id: "n0"}, position: {x:0, y:0}},
{group: "nodes", data: {id: "n1"}, position: {x:100, y:50}},
{group: "edges", data: {id: "e0", source: "n0", target: "n1"}}
]);
console.log(cy.container());
Here is the jsfiddle where you can see the "height":0px in log and nothing in rendered.
If you initialize cytoscape with static data, consider doing it like the documentation shows:
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: { /!!!
name: 'grid',
rows: 1
}
});
you dont specify a layout in your sample code, i rarely do it like that, i simply add the nodes/edges and call the layout algorithm i want, the rest of your code seems ok, did you include all scripts and css files for cytoscape?
I'm following the example from the Telerik web site for Basic Usage with the exception of using a Model, children Heirarchy. I just want to be able to list shapes with text boxes and be able to connect them and get the connections later. So far, I'm able to list the shapes and the text boxes, but for some reason all the shapes get centered to the origin of the diagram. I'd like to be able to list the shapes in some order, without connections, then connect them later on on the diagram. Here is the code I have so far:
var data = [{
firstName: "Antonio",
lastName: "Moreno",
title: "Team Lead",
colorScheme: "#1696d3"
},
{
firstName: "Alfredo",
lastName: "Morales",
title: "Team Lead",
colorScheme: "#1696d3"
}];
function visualTemplate(options) {
var dataviz = kendo.dataviz;
var g = new dataviz.diagram.Group();
var dataItem = options.dataItem;
g.append(new dataviz.diagram.Rectangle({
width: 210,
height: 75,
stroke: {
width: 0
},
fill: {
gradient: {
type: "linear",
stops: [{
color: dataItem.colorScheme,
offset: 0,
opacity: 0.5
}, {
color: dataItem.colorScheme,
offset: 1,
opacity: 1
}]
}
}
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.firstName + " " + dataItem.lastName,
x: 85,
y: 20,
fill: "#fff"
}));
g.append(new dataviz.diagram.TextBlock({
text: dataItem.title,
x: 85,
y: 40,
fill: "#fff"
}));
return g;
}
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource: new kendo.data.HierarchicalDataSource({
data: data,
}),
shapeDefaults: {
visual: visualTemplate
},
});
var diagram = $("#diagram").getKendoDiagram();
diagram.bringIntoView(diagram.shapes);
}
$(document).ready(createDiagram);
I've made some sample: http://dojo.telerik.com/UbECE that makes rectangles one next to another.
I am following this example from API Documentation http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/diagram#configuration-shapeDefaults.visual
They are using:
$("#diagram").getKendoDiagram().layout();
which works.
Your function will became:
function createDiagram() {
$("#diagram").kendoDiagram({
dataSource : data,
shapeDefaults: {
visual: visualTemplate
},
});
$("#diagram").getKendoDiagram().layout();
}
i made a chart, with highstock, that contains the enabled scrollbar but when i focus the mouse on it, it happens a strange behavoir: the chart goes down and covers the scrollbar.
the options that i used are:
var options = {
chart: {
title: {
text: ''
},
renderTo: 'containerGrafico'
},
yAxis: {
title: '',
tickPixelInterval: 30,
labels: {
formatter: function () {
return '€ ' + Highcharts.numberFormat(this.value, 0);
}
}
},
xAxis: {
categories: seriesMesi,
labels: {
formatter: function () {
return arrayMesi[this.value.substring(4, 6)] + " " + this.value.substring(0, 4);
}
},
max: 6
},
scrollbar: {
enabled: true,
barBackgroundColor: 'transparent',
barBorderRadius: 7,
barBorderWidth: 0,
buttonBackgroundColor: 'gray',
buttonBorderWidth: 0,
buttonArrowColor: 'yellow',
buttonBorderRadius: 7,
rifleColor: 'transparent',
trackBackgroundColor: 'white',
trackBorderWidth: 1,
trackBorderColor: 'silver',
trackBorderRadius: 7
},
series: [
{
name: 'Totale Versato',
color: '#96B7D8',
type: 'column'
},
{
name: 'Prelievi',
color: '#D1D1D1',
type: 'column'
}]
};
anybody can tell me where i'm wrong?
thank you very much
Cinzia
In general, categorized axis for Highstock isn't supported.
Anyway, for me it works properly, see: http://jsfiddle.net/3bQne/1004/
Try to update to latest (1.3.10) version and remove categories. Or use Highcharts with categorized axis.
If none of above will help - recreate issue on jsFiddle.