I have to create the nodes and edges, having interconnections. I am using d3 js for the same. Now the problem is that the graphs look so much messy. I tried using quadratic bezier curves to draw the edges between the nodes. I want that If a press a button it should rearrange into simplified view.
I happened to look at metacademy, they are a open source project. Which have the exact functionality I am looking for. https://metacademy.org/graphs/edit/new, you would need to login. However not able to find their part of code which is doing the same.
Initially created graph
After pressing the refresh button
I am pretty new to d3js, so I will be thankful for any help/suggestions.
I see this is a pretty old question, but FWIW, I designed the graph you're referring to.
Getting graphs to organize so that it minimizes edge crossing is an area of active research. For metacademy, I integrated d3.js + dagre
https://github.com/dagrejs/dagre
Related
In this force directed graph,
https://codesandbox.io/s/3d-force-graph-forked-le6ny7
I want all nodes in group 2 to repel each other alot, but I want all nodes with any other group combination to repel each other only a little.
I saw this answer for how to apply a custom force to only certain nodes.
https://stackoverflow.com/a/61985672
I added this in the codesandbox (for whatever reason, this code isnt applied on page load - it doesnt re-draw the graph until I make some kind of code change, like adding a newline. Weird).
But after re-drawing the graph, now the graph is in 2D - not 3D anymore.
How can I add a custom force to only certain nodes, AND keep the graph in 3D?
I'm new to D3 and force graphs and wondering how I can create a force graph with some constraints and forces to make a graph layout like this.
I think I could accomplish by bounding nodes into a series of boxes and letting the forces arrange the nodes within the boxes.
Can anyone help me figure out if this is possible with a force graph?
I want to draw a network which can show the weight of each edge.
Currently, I was able to draw an unweighted graph using PUNGraph of SNAP.
G = snap.PUNGraph.New()
However, I wasn't able to find the class for the weighted graph.
I don't want to just put the value above the edge, I want to somehow resize the edge base on the value of the edges.
Could someone tell me how I can draw graph something like below?
If possible I would like a solution using SNAP.
I end up using nodeXL which is capable of drawing a graph likes below.
Also D3.js supports a lot of good representing features.
I am still looking for more fascinating tools.
I came across following graph layout proposed in the paper NodeTrix :
The big blocks that are visible are nodes themselves (A sort of composite node of a sub-graph).
I see that the edges are some sort of curves which seem to not intersect too much among themselves. Also, the nodes and edges don't intersect among themselves. Paper doen't talk about it btw.
I was hoping to implement this visualization. I have following doubts:
Q1. Is this some specific algorithm to arrange Nodes-Edges so that the graph look good, as shown in this paper ? Any other algorithm in general ?
Q2. Is there some special algorithm for the curved edges shown above as well ?
It would be great if someone could figure out the exact algorithm in the above figure visually, but some general similar algorithm should also do.
One algorithm is Force-directed graph drawing. It will produce an output very different from the posted picture, but it is quite popular and might give you a place to start looking.
To be honest, I suspect that the shown graph is manually laid out.
EDIT: Answer to comment
In the example all nodes are square boxes, and the edges start/end diagonal to the sides of the boxes. A way to to this could be
Place boxes using force-direction (or likely some customized version of it, forces depend on the size of the box)
Imagine a "guide-edge" going directly between the centers of the boxes
Calculate the the places where the guide-edge intersects the boxes, and use that as the start/end points of the real, drawn edge.
Make the real edge start diagonal to the sides, and use bezier curves to draw the curve.
You probably want to represent this as some vector format, that has bezier cures built in, e.g., svg.
I am doing an assignment where I have to draw a diagram on a web page with a number of boxes, some of which are to be connected by arrows. I have everything setup so that I'm able to draw the actual diagram, arrows and all but now I'm faced with the problem of placing the boxes in the optimal way. By this I mean laying out the page so that I have a minimum of lines crossing.
I have to do two types of diagrams: One is a more hierarchical diagram where I know which box to place top left and where all boxes form a hierarchy. The other is more tricky where no box needs to have a specific place and the end result is not a hierarchy. In either scenario are there more than one connection between two boxes. It's pretty much the same as laying out an E/R diagram for a database in the most readable way.
Does anyone know how to do this or where to find information about how to do this?
Thanks in advance
./CJ
Laying out an arbitrary graph with minimal crossings is an NP-hard problem, so you're left with finding a good heuristic.
What comes to mind is this:
Lay your items on the perimeter of a circle with their connecting edges.
Use simulated annealing to swap items, aiming to minimise the number of crossings.
Tidy up using, say, force directed layout.
Another option would be to find a spanning tree, render that, then add in the back links. This may well produce more crossings than the simulated annealing approach, but it has the benefit of reusing the solution to the first part of your assignment.
Best of luck!