Nodes - Choose the Layer to appear JavaFX2 - javafx-2

I want to be able to choose the layer that the Nodes appear and change it throughout the course of the program.
I know that the last added Nodes appear on the top of the previous one.
In swing, I use JLayeredPane and its method setLayout(JComponent, integer). The higher the int, the higher level the component appears on screen.
Is there something similar?
Thank you

I think you can play with the z-order indices of child nodes by combinations of
Node node = pane.getChildren().get(index);
Node node = pane.getChildren().remove(index);
pane.getChildren().add(newIndex, node);

A layout has been done to do this job : StackPane.
The JavaFX tutorial has a chapter dedicated to it.
The different pane are stacked but if the opacity is not set to 100 %, they are all visible.

Related

position nodes in force layout graph vertically

I read a couple of posts on position nodes in force layout but didn't find an answer to what I was looking for.
I have an object with nodes and links.
I' trying to create a graph which would show all the nodes top to bottom.
I was looking at the example code from here:
https://github.com/danielstern/force-graph-example
Here's a screenshot of the result:
I'm trying to find a way to position each node so the nodes without parents would be on the top and the ones connecting to them would be under them and so forth.
Here's an image to illustrate it:
Right now, all the nodes are scattered randomly.
I wanted to if I need to actually calculate the position of each node in a vertical view or is there a smarter/built-in way to achieve it.
I looked at this example which looked promising:
How to organise node positions in D3 Force layout
But in my case I don't have a way to differentiate between nodes levels so I don't think the yPostion would help.
I was also looking at thes post:
d3.js - How can I expand force directed graph horizontally?
According to #Lars Kotthoff:
"The point of the force layout is to automatically lay out a graph like this so that you don't have to specify the positions of the nodes yourself".
Since my graph is not really a tree, I don't think the tree view would match.
What would be my best approach to position the nodes?
Or perhaps there's a better library to achieve what I need?
I found this package:
d3-dag
It basically supports what I need:
"Often data sets are hierarchical, but are not in a tree structure..."
Here's an exmaple:
exmaple

Fixing Vertices in Layout (KKLayout) JUNG/JUNG2

I am new here.. MY Question :
i have used KKLayout for visualization a graph. The Graph is created in while-Loop (after each iteraion) after a new Calculation and every time the vertices is placed on random Locations/Postions. I want to fix them, so that they placed on same Position after each Loop-Iteration. How can i fix them ???? thanx
By default, the force-directed layouts start with their vertices in random positions; this is why you're seeing this behavior.
There are a couple of different approaches that you can take to resolving this issue.
(1) Use the Layout.setInitializer() method to specify a consistent starting position for each vertex. This will ensure that KKLayout always does the same thing.
(2) If there is a specific layout result (set of positions) that you like, you can use StaticLayout initialized with those positions. PersistentLayoutImpl can be useful for serializing/restoring those positions if desired.

How to have separate layout sets per screen in XMonad? [duplicate]

This question already has an answer here:
XMonad set layout depending on which monitor it's displayed
(1 answer)
Closed 5 years ago.
The use case is basically to have layouts with a master area on the left side for my right monitor, and the same layouts only 'reflected horizontally' (using Layout.Reflect) on my left monitor, so that the master areas are always in the center.
A solution that has separate layout sets per screen should be more than enough for this.
I have a vague memory of finding such a module way back when,
but I've went through the entirety of xmonad-contrib recently (looked at xmonad-extras as well) and didn't find a solution for this.
There are separate layouts per workspace, and having separate workspaces per screen, but I want to switch between screens on the fly and have consistent layouts as described above.
In case I'm not missing any module in contrib, could someone please point me in a good starting direction as to how to implement such a thing?
Any help is greatly appreciated!
This may not be exactly what you're looking for, but you can define a number of layouts, and then use Alt+space to cycle between them. That way you can have different layouts on different screens.
For example, I like to toggle between the Full and ResizableTall layouts:
myLayouts = ResizableTall nmaster delta ratio [] ||| Full
where
-- The default number of windows in the master pane
nmaster = 1
-- Default proportion of screen occupied by master pane
ratio = 1/2
-- Percent of screen to increment by when resizing panes
delta = 3/100
If you're looking for a way to have different workspaces default to different layouts, I don't know how to do that within XMonad.

How to improve spacing in 'cose' layout in cytoscape.js?

I'm using cytoscape.js 2.3.9 and I'm playing with some layouts.
I'm now rendering about 150 nodes, but I wish to go up till 1000-1500. There are about 25 nodes with 1-50 posible childs.
My best approach for what I need has been with 'cose' layout, but I'm quite far from my final expected result.
I've tried several configurations playing with its attributes values as documented, but I'm no so much in force directed simulations and feel like trying without much sense.
With this config:
layout: {
'name':'cose',
'animate':false,
'refresh':.1,
'edgeElasticity' : 20,
'fit': true,
'gravity' : 100
}
I get this result (red line shows the size of the containing div):
I wish the graph fits better, leaving less blank space and child nodes to be closer to its parent.
Sometimes with few elements fits better (but not always), like this:
But even so some child nodes overlap its parent and others get so far.
Any advice on attributes values or any other layout that fit better on my purpouse?
Thank you.
As is the nature of force-directed/physics-sim layouts, you have to tailor the force values to your particular data. My suggestion is to copy-paste the example in the docs for cose; it uses the default values.
Experiment by changing each value independently, and see what effect you get.
Unfortunately, there is no one-size-fits all set of force values, but we've tried to set defaults that work OK for most data we've seen.

Directed acyclic graph in web UI

I need to display a Directed Acyclic Graph in a web page. I am not looking for an off-the-shelf library or solution. I am looking for suggestions, recommendations or a push in the right direction.
1. DAG Visualization
I am not sure of how the nodes and relations will be represented. Viable solutions may be Treemaps, the good old node & line or a combination of that two. I don't have a problem if one node appears more than once on the screen.
I don't need all the nodes to appear on the screen from the start. The user may expand a node by double clicking or zooming for example.
I am open to all suggestions and advices.
2. Technology
There are some functionalities that the implementation must have:
drag & drop
zoom
events on mouse interaction with nodes
From my point of view, I have 2 options (Flash is out of the question):
a. HTML5 Canvas
Disadvantages: no vectors, basically just an image; no implicit mouse events on nodes;
Advantages: speed; popularity; animations
b. SVG
Disadvantages: low speed when there are many nodes;
Advantages: vector graphics; elements are in the DOM so you can have events and so on;
c. A mix of HTML5 Canvas & SVG
Assuming you want to dynamically update your graph, you could probably use python on the server with the pydot GraphViz module.
I have not tried this, but it's something worth looking into.

Resources