Rendered nodes overlap in visjs network graph - vis.js-network

I render a graph using visjs. The shape of the nodes are of type dot. Each node is given a custom size using the size attribute.
When the graph is rendered some of the nodes overlap. So the graph looks like in the following picture:
I expected a graph like the this picture is showing:
What am I doing wrong?

Try to use the physics configuration.
see this example of visjs.
GOOD LUCK.

To be more specific compared to the TERMIN's answer, in the physics configuration example you can see (at least for the barnesHut solver) that increasing avoidOverlap prevents overlapping even when springConstant is equal to zero and
var options = {
"physics": {
"barnesHut": {
"avoidOverlap": 0.2
}
}
}
is probably enough (but you may increase the value according to your needs).

Related

CGAL surface mesh - removing face

Does the remove_face method change the mesh indices?
I get a segmentation fault with this code:
auto face_iterator = m.faces_around_target(m.halfedge(v3));
for (auto i=face_iterator.begin(); i!=face_iterator.end(); i++) {
m.remove_face(*i);
}
According to my understanding of the documentation, as long as I don't call collect_garbage the faces are only marked as removed., therefore no changes to indices. What is happening?
Does remove_face, also remove the face halfedges\ makes them point to null_face? It does not seem to do so, and I don't understand why not..
Thank you.
The face is indeed simply marked as removed but its iterator is invalidated by the removal (remember that iterator goes only over non-removed elements).
As stated in the doc: removes face f from the halfedge data structure without adjusting anything.
You need to use a higher level function such as CGAL::Euler::remove_face().

Constraining movement of a node to a single axis

Using Cytoscape.js, how can I constrain movement of a node to a single (i.e. either the x or y) axis? I'd like to be able to make it so a node can only be dragged vertically or horizontally, but not both. In other words, I'd like to lock a node, but only on a single axis. I'm not sure if this is possible, and wasn't able to find anything in the documentation that mentioned this specifically, so I figured I'd ask.
Thanks in advance!
Use the automove extension, which lets you set whatever restrictions on node positioning that you like. Constraining the x value is as easy as passing a (x, y) => { return { xConst, y }; } function to the extension.
I ended up coming up with a way to approximate the result that I wanted by listening for each node's free event, and setting its position to what I needed it to be. This doesn't restrict dragging of nodes to a single axis, but it does restrict dropping of nodes to a single axis, if that makes sense.
Here is the Cytoscape.js description of the free event:
free : when an element is freed (i.e. let go from being grabbed)
from: http://js.cytoscape.org/#events/collection-events

how to show the mesh in terrain or others in ogreļ¼Œ

http://i.stack.imgur.com/kcOxx.jpg
Look at the picture, I want to achieve something like this in OGRE, but I have no idea about this.
I am trying to make a SLG game with OGRE now, and the first step is to show the mesh.
I am a Chinese student and it's... My English grade is not good, and in my country I can only find a little doc about OGRE. The internet is filled with Unity3D... I thank for everybody who has read my question.
One way
Add to your object's .material script one more pass.
material myMaterial
{
technique
{
pass solidPass
{
// sets your object's colour, texture etc.
// ... leave what you have here
polygon_mode solid // sets to render the object as a solid
}
pass wireframePass
{
diffuse 0 0 0 1.0 // the colour of the wireframe (white)
polygon_mode wireframe // sets to render the object as a wireframe
}
}
}
This of course renders the object twice, but I assume it's just for debugging purposes and the lines are quite slim, also the object overlaps the wireframe at some parts.
The usual way
Add another texture_unit to the object's .material script that contains thin white squares of size the same as in the UV mapping (which you can export with most modelling software) with a transparent background
Make sure the .material script has alpha enabled in the pass you created
scene_blend alpha_blend
scene_blend_op add
This lets you choose what kind of lines you want.
Source:
Also check the OGRE Manual under Material Scripts. It goes much more in depth about the material script itself

Leaflet : Dynamically count number of feaures loaded into a layer

I have an application where markers/features are loading into layers/layerGroups (what's the right term?) from multiple sources, and they're loading dynamically (based on some attribute in feature.properties and other conditions). I want to be able to tell on the sidepanel the number of markers currently loaded into the layer on display. Given just the layer's variable/identifier, how can one find the number of markers/features loaded into it?
var layer1= L.layerGroup();
layerControl.addOverlay(layer1, 'Layer 1');
... // loading stuff into this layer from different sources
console.log(layer1.length); // doesn't work, gives "undefined"
console.log(JSON.stringify(layer1)); // doesn't work, "TypeError: cyclic object value"
..so I guess layers can't be treated like JSON objects.
I found a related question, but the answer there only addresses markers loaded from one geoJson source and advises a simple counter++ in the onEachFeature. I'm working with a lot of layers in my application and would appreciate not having to put a separate counter variable for each and every one, rather want to just use the layer's variable/identifier to count. If we can add a layer to a map or clustergroup so simply then we ought to be able to count what's in it, right?
The getLayers() function returns an array containing all the features in your object. Then you can get the length of that array.
layer_variable.getLayers().length;

Getting the width of a path drawn on a XAML canvas

I'm drawing a canvas programmatically, given a bunch of path data from somewhere else and adding it to the canvas as
// This is actually done more elaborately, but will do for now
PathFigureCollection figures = GetPathFigureCollection();
var path = new Path
{
Data = new PathGeometry { Figures = figures },
Fill = GetFill(),
Stroke = GetStroke(),
StrokeThickness = GetThickness()
};
MyCanvas.Children.Add(path);
Now, I have the canvas in a ScrollViewer, so I want to make sure that I can scroll all the way to reveal the entire path (actually paths - I have several, generated the same way) but no further. I tried this:
var drawingWidth = MyCanvas.Children
.OfType<FrameworkElement>()
.Max(e => Canvas.GetLeft(e) + e.ActualWidth);
MyCanvas.Width = drawingWidth;
This works well for some other elements (the drawing also has a few text blocks and ellipses), but for the paths both Canvas.GetLeft(e) and e.ActualWith (as well as some other things I tried like e.RenderSize.Width and e.DesiredSize.With) all return 0. Since the element that extends farthest to the right is a path, this results in a canvas that is too small.
How do I get the width of the Path elements too?
Ha, found it!
Rewriting the LINQ query as a loop, I could cast paths to Path, and use path.Data.Bounds.Right as the right edge of that element.** I might be able to convert the code back to a LINQ query now that I know what I want to do (I always find them more readable than stateful loops...).
I found this when I, after having perused the link provided by markE where, as a side note, it was stated that
If your design requirements allow more rough approximates, then you will find that cubic Bezier curves are always contained within their control points.
So, if I could find the right-most control point of all the path figures in my path, I would be home. Intellisense did the rest of the job for me :)