I am trying to space out the nodes between the various nodes that are in my network. Now, the network has a lot of nodes with many relationships between them. However, no matter how much I play with the layout and hierarchical options, the nodes are always overlapping each other when they show up on the screen. I have tried to adjust the various options shown below to no avail. Is it possible to space the nodes out further? I don't mind a scrollbar either.
const options = {
layout: {
// improvedLayout: true,
// clusterThreshold: 500,
hierarchical: {
direction: "UD",
sortMethod: "directed",
nodeSpacing: 100,
//treeSpacing: 100,
edgeMinimization: false,
parentCentralization: true
},
},
};
Related
I want the slider to use centered slides, but not in the first and the last ones.
When I enable the centered slides property "centeredSlides: true" and set also "slidesPerView: 1.2" I get the correct result on the middle slides, but the first and the last I want to be the left or rigth position respectively.
this.SlideOptionsPaths =
{
initialSlide: 0,
centeredSlides: true,
slidesPerView: 1.2,
slidesPerGroup: 1,
spaceBetween: 10,
//slidesOffsetBefore: -82,
//slidesOffsetAfter: 160,
speed: 400,
fadeEffect:
{
crossFade: true
}
};
This is the actual behavior:
And i need the first image to be aligned left...
When swiping trow the cards (the middle cards) I need this behavier (that is correctly happening):
By the time the question was posted there was no easy way to achieve this result. But since Swiper version 5.2 a new centeredSlidesBounds parameter was added to the API.
All you need to do is use the following parameters in the options object:
{
centeredSlides: true,
centeredSlidesBounds: true
}
Based on the docs what about using:
{
initialSlide: 1
}
which will push the slide along one so it has something to fill the gap, or
{
loop: true,
}
which will start at the beginning but show the end wrapped around.
Because the option your asking isn't supported as far as I know.
When initialing loading the vis network chart, all nodes crowded together, due to some reason I could not set layout improvedLayout to true, and also I need to set physics to disable.
here is my option setting, please advise how I can let the nodes positioned well within the following option setting.
var options = {
"edges": {
"smooth": { "forceDirection": "none" }
},
"physics": { "enabled": false, "minVelocity": 0.75 },
"layout": { improvedLayout: _improvedLayout }
}
initialing loading, all nodes stay together which makes me hard to see them:
with improvedLayout set to true, it displays well, but the performance is really bad I could not set it in this way.
here is an example: I have 77 edges and 65 nodes, it took 7-8 seconds to draw the network picture when I set improvedLayout to true, is that normal?
I am also trying to positioning a node in a cell in grid layout as below
layout: { name: 'grid',
fit: true, // whether to fit the viewport to the graph
rows:5,
columns:12,
padding: 10, // the padding on fit
position: function( node )
{ console.log("Row : "+node.data('row') + ", COL : "+node.data('col'));
return {row:3, col:node.data('col')};
}
},
But node is always created in the middle of the canvas, even if I hardcode the row as above. Any suggestion, what is going on.
Thank you
If you're manually specifying positions, you shouldn't need to set the overall dimensions. Maybe you've overconstrained it (e.g. row beyond rows)?
Alternatively, you could set the dimensions and a sort function to indicate the ordering.
I am trying to build a network with vis with labels inside the nodes where the text scales with the value. Based on the 'scaling' documentation for nodes, this should be possible.
I took the example network code from the getting started section of the documentation and added values to the nodes. If I set the shape to something with the label external (like 'square'), the nodes change size: Fiddle
But if I change to shape where the label is inside the node, they no longer scale: Fiddle
I'm guessing it's a problem with my options, but I did the part of setting nodes.scaling.label.enabled to true:
var options = {
nodes: {
shape: 'square',
scaling: {
label: {
enabled: true
}
}
}
};
There is one option in openlayers selecting features under the box. But, I want to select the features when I draw line (draw with shift key down-free hand drawing). In my script I already implemented drawing and selecting options. I can draw line and select (multiple) features independently. Now, I want to merge this two. I want to select those features data which are touched by my drawn line. Is there any sample example available?
Here, I have given sample code -
//Selection property---------------------------------------
var selectControl = new OpenLayers.Control.SelectFeature(
[vectorLayer],
{
clickout: true, toggle: true,
multiple: true, hover: false,
toggleKey: "ctrlKey", // ctrl key removes from selection
multipleKey: "shiftKey" // shift key adds to selection
}
);
map.addControl(selectControl);
selectControl.activate();
var draw = new OpenLayers.Control.DrawFeature(
vectorLayer, OpenLayers.Handler.Path,
{displayClass: "olControlDrawFeaturePoint", title: "Draw Features", handlerOptions: {holeModifier: "altKey"}}
);
Thanks, in advance.
You have to register event "sketchcomplete" that will run over all features in layer-bo-be-selected and check if it has shared geometry with line sketched.
Something like this, unfortunately I can't test it now.
vectorLayer.events.register('sketchcomplete', vectorLayer, sketchCompleteFunc);
function sketchCompleteFunc(obj) {
for (var i=0;i<layer-to-be-selected.features.length;i++) {
if (layer-to-be-selected.features[i].geometry.intersects(obj.geometry)) {
selectControl.select(layer-to-be-selected.features[i])
}
}
}