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
Related
I'm trying to render a tree that is very broad... and it renders, as expected, in a long, skinny horizontal image.
Problem is that I need a graph suitable for a document. I would very much like to take and move the nodes that are rendered horizontally and "drag" them down so that the graph is more vertical... with the edges curving to accommodate this. Are there any clever ways to accomplish this? GraphViz settings? Third party tools that let me manipulate and fine tune the output? I work mostly in the Python ecosystem, but open to others. Also open to the use of tools like Visio and other pro drawing tools. Thanks!
Edit
After implementing the answer below by #sroush, and then tweaking a little further with Photoshop, got some nice results.
Tweaking the above in Photosop. Had to add the two curved edges after the secondary node by hand, but it's worth it. Much more presentable.
I assume you are using dot, and your graph "naturally" has only a few ranks (rows).
There are a few tweaks that will help a bit (reducing node horizontal footprints):
node [shape=rect] // snugger fit into rectangles
insert newlines into node labels e.g. xxx [label="Controller Board\n#19_8"])
Also try the unflatten program (https://www.graphviz.org/pdf/unflatten.1.pdf). It will increase the apparent number of ranks (rows).
See related question here with command line examples:
Distribute nodes on the same rank of a wide graph to different lines
You can use the minlen property to limit the minimum level span of some edges.This avoids the result becoming very long in the horizontal position.
For example:
digraph {
a->b
a->c
a->d
a->e
}
This will output the following image:
But when minlen is used, the picture will become longer vertically but shortened horizontally:
digraph {
a->b
a->c
a->d[minlen=2]
a->e[minlen=3]
}
I've spent hours searching for an answer to this, but in most cases either the
question is about plots/charts (rather than graphs as in "control flow graph"),
or the answer "just use graphviz" is a valid answer.
However I have some constraints and requirements that make "just use graphviz" a
non-answer.
The full graph is large enough that it's not possible to generate a graphviz
for all of it.
Nodes and edges will be dynamically added and removed.
Nodes have lots of information that will be hidden by default and will be
expanded on request (imagine every node as a table with expandable rows/cols)
I want to be able to show only a subset of the graph on request, e.g. for
features like "only show reachable part of the graph from this node" or "show
all simple paths from this node to this node".
Basically I want to be able to start drawing nodes and edges on a 2D plane, and
add new nodes and edges dynamically. It's fine if nodes/edges move around as new
stuff is added. While I don't yet have hard requirements for this, it'd be good
if it looked "nice" -- for example if a node has lots of incoming edges (this is
a directed graph) ideally it'd be in a central place on the plane with all other
nodes around it etc.
Anything that gets me going would be helpful. Thanks.
(I don't know what label to add to this, adding "graph-theory" because I don't know what else to add)
I have a MetroManila.osm file and i parse it so it can read roads only using this command: --keep = --keep-nodes=highway --keep-ways=. Is this the right command for filtering only the roads? What i want after parsing is to create a node where there's intersections or curves, or is it possible with just using the whole nodes in MetroManila.osm? Can i create an edge using it and how do i do it? Currently, i'm really lost on what to do since i'm fairly new on android studio and in osmdroid.
This hasn't really anything to do with Android or osmdroid.
For learning how to create a routing graph from an OSM file see the related answer at help.openstreetmap.org. Quoting from it:
parse all ways; throw away those that are not roads, and for the others, remember the node IDs they consist of, by incrementing a "link counter" for each node referenced.
parse all ways a second time; a way will normally become one edge, but if any nodes apart from the first and the last have a link counter greater than one, then split the way into two edges at that point. Nodes with a link counter of one and which are neither first nor last can be thrown away unless you need to compute the length of the edge.
(if you need geometry for your graph nodes) parse the nodes section of the XML now, recording coordinates for all nodes that you have retained.
Also take a look at routing in the OSM wiki to get some general hints and existing tools and libraries.
Regarding osmdroid: If you don't rely on offline routing then take a look at osmbonuspack, it supports online routing.
If you don't want to reinvent the wheel then just use one of the existing offline routing tools mentioned in the OSM wiki.
I'm modifying the breadthfirst example on the Cytoscape site (the one with the cat at the top). When I create a new "predators" node and put cat and dog nodes in it, then change the edge that goes from cat to bird to now go from predators to bird, the layout gets completely messed up.
How can I use compound nodes with breadthfirst, or is there another layout I should be using? I don't want anything fancy, I just want the compound nodes to follow the same rules that a normal node follows.
I understand you want something simple, but the problem is that compound graphs are more complex than ordinary graphs.
A compound node does not have independent dimensions: http://js.cytoscape.org/#notation/compound-nodes
A layout has to take this into account and have a generic, customisable algorithm for placing the children such that the constraints for both the children and the parents are satisfied.
This doesn't fit with most layouts, and so only those layouts marked with explicit compound support will give you the results you're looking for. Ordinary layouts ignore compound nodes.
Typically, force-directed (physics simulation) layouts work best with compound graphs -- like Cola or Cose Bilkent. Tree-like layouts don't. There are too many cases where satisfying the layout rules for compound graphs would be impossible.
You can try Cola with the directionality constraint to make the result tree-like. Or you can write your own layout using the API if your compound graphs are simple enough and you can make enough assumptions about the topology of your graphs.
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.