I have used vis.js to draw some DAGs using the hierarchical layout option. It works well, however for my use case there are often going to be edges that must "jump vertex generations," not certain if I am saying that properly. Essentially, one branch may have 10 levels, and then a sibling of the parent of the deep branch may want to connect to the deepest leaf node.
This "works" - vis.js draws it. But it screws up my layout, shifting a large portion of the preexisting graph, and it will not be useful for a user to look at the result. I have attached a picture of what I am trying to achieve and what the current results are, can anyone point me in the right direction?
Solution turned out to be very simple, I just overlooked it. Using the hierarchical layout, it is possible to assign each node a field called level. It is an all-or-nothing option: either you let vis.js take care of the levels, or you manually assign all your nodes a level. It respects the levels very well, and when adding edges to nodes whose levels have been manually defined, the nodes no longer jump around the layout.
Related
I have created a graph which have different parts. In one part two vertices are connect. In other three vertices are connected together. The problem I have is that I would like the data explorer to display all the vertices and edges visually. Is there a gremlin query for this? It also seems as you traverse deeper in the graph the data explorer removes previously traversed parts which means you can never see the whole graph at any given time. Is there way around this?
Unfortunately, it is not possible with the current implementation. It is designed to let you navigate large graphs where all the nodes can not be displayed at the same time.
You select the starting point from the list of nodes on the left side. As you click on a node in the graph to reveal its adjacent nodes and move the focus to this node, the data explorer hides the previous nodes that are further away from the new focused node to prevent showing too many nodes.
For your case, you can at best show either node clusters (by selecting a node in the cluster) but not both at the same time.
I'm building a JavaFX app and I want to display interactive graph of my huge data in it. something like placing cytoscape in javaFX app and working with graph inside of my app. my node may be up to 30000 nodes at max but usually its about 200 nodes after filtering nodes.
key features (sorted by importance):
generating graph with best layout and good looking with good performance and low overlapping (same as cytoscape)
selection some nodes and mark them (same as ctrl+L in cytoscape)
selecting neighbours of some nodes
building new graph from number 3
filtering graph base on weights, number of edges and ...
hiding and showing some selected edges and nodes
capturing image of built graph
Additional features :
zoom in zoom out
node tagging
multi color nodes and edges
Changing width of edges base on weight
Changing color of specific nodes and edges without rebuilding graph
Directed edge support
I have tested cytoscape.js but couldnt use it in javaFX browser. im testing WebVowl now. is anything better than these for my purpose ? if you suggest something that it cant be placed in javaFX app directly, please show how I do it.
Thanks
Depending on what you're trying to do, you could use Cytoscape as the data model, and build a JavaFX renderer around it. I've wanted to do this, but it's not in roadmap associated with our funding.
I've done a few JavaFX projects that might be good starting points, but they don't integrate directly with Cytoscape, which has a richer model of subnetworks, groups, etc.
https://github.com/AdamStuart/appFX/tree/master2/src/main/java/diagrams
one of which is based on a great example from TESIS DYNAware GmbH.
As you realize, the key issue is filtering down the network before trying to visualize it. The number of edges associated with 30000 nodes will bog down most any system, if you try to build something interactive.
I'm working on a graphical shape editor that uses the QGraphicsScene/QGraphicsView as its basis. I have a lot of experience with the scene/view framework and understand it fairly well. The issue that I'm having is that QGraphicsScene::items always returns items in the insertion order (either ascending or descending) regardless of the Z-order or the use of QGraphicsItem::stackBefore call.
The issue is that, as with most graphics editors, I need to be able to move shapes forward or backward in the stacking order. At the end, to save the resulting data, I have to traverse the list of the items in the scene and save each item's data in whatever format I'm using.
The only way that I've found to do this is that I have to remove items from the scene and reinsert them in the desired stacking order. In this particular task, it's a small number of items and happens without noticeable delay, but in a related editor, it could be many thousands.
While the QGraphicsItem::zValue and QGraphicsItem::stackBefore allow me to influence the drawing order, neither of them changes the order that gets returned from QGraphicsScene::items. Since the data I ultimately save needs to reflect the drawing order, I have to remove and reinsert to get the correct ordering at the end.
Questions:
Have I've overlooked any other techniques for managing items within the scene that will influence the results of QGraphicsItem::items?
Or is there another method for traversing the items within the scene that will give me the drawing order?
I can confirm that QGraphicsScene::items() and items(sortOrder) return the item list in the original creation and stacking order, which does not at all agree with the docs.
However, I found that by using
QGraphicsScene::items( QGraphicsScene::itemsBoundingRect, Qt::IntersectsItemBoundingRect, sortOrder) I do get the items in the correct drawing order, so this function apparently takes calls to QGraphicsItem::stackBefore() into account.
i don't use the z-order feature so I can't comment on whether that works in this scenario or not.
When I convert my graph into trees I don't mind having duplicate nodes in the trees. let me explain the reverse way. Suppose I have 2 trees with a common element. I can join them on the common element to create a graph.
Can I do this in the opposite direction, i.e., start with the graph and split an element into duplicates to create multiple trees?
If I understand correctly, you want a tree containing all the links from the original, by allowing original nodes to appear several times in this tree. It's some kind of spanning tree, except the constraint is on keeping all links (instead of keeping all nodes, as in a classic spanning tree).
So you can use a similar approach than those used for discovering classic spanning trees. The basic approach is based on either breadth- or depth-first search. You start from a random node, and you add it to your tree. You then explore its neighbors using the search algorithm, and each time you reach a node, you add it to your tree (with the corresponding link). You must maintain a list of all processed links, so that you don't end up treating the same link twice. Also, you need a way to identify each node uniquely, to allow subsequent processing on your tree. For instance, simply number the nodes in your original graph.
What I'm trying to achieve?
I would like to have groups of nodes, in a tree-like structure where each root is either the main root, or is a descendant of a leaf from another tree.
Generating what you see below is easy, but what I'd really like to see is complete circles around each root. However, since the nodes are repelling each other the below gaps are present between each cluster. I assume the solution involves ignoring the repulsion caused by charges between leaves coming from different roots.
My ideas
Set some sort of radius around each root which repels other nodes in all directions beyond that radius, allowing the leaves to be circular within it
Use linkDistances and linkStrengths to somehow arrange the clusters in a way that they do not interact significantly
Is this possible?
Other than my vague ideas, I really have no clue how to do this!
From reading the D3 docs, I found that unlike the dynamic linkDistance and linkStrength methods, node charge manipulations seem to be universal:
"All nodes are assumed to be infinitesimal points with equal charge and mass."
If this statement is true, can one of you guys please guide me in the right direction?
I'm not sure exactly how you would approach it, but I found an example in which clusters have charge only within themselves and nodes don't interact with different ones: http://bl.ocks.org/mbostock/1804889
I'm think the beginning of an answer might be in this stackoverflow question, Space out nodes evenly around root node in D3 force layout
Do know that is possible to make each node's charge dependent on some attribute of same.
Try it with something like
.charge(function(d) { console.log(d); //you'll see this brings up the nodes
if (d.something == onething) {
return -1300;}
else {
return -100; }
})
As the linked-to answer mentions, you'll almost certainly have to experiment with "friction" and "linkDistance." Don't be afraid of trial and error--I at least have been intermittently dealing with this kind of issue for a few months now, and haven't yet found a "general" solution.