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?
Related
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 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
Here are two different ways of drawing the same hierarchy. Notice that in the "stacked" layout, nodes are always one layer higher than their highest "child" node. (Important: See edit at bottom of question for another example)
Do these two types of layered drawing methods have specific names? I'm trying to find existing algorithms for the "stacked" one, but can't seem to surface any info because I don't know what it's called.
If they don't have names to distinguish them because they rely on the same algorithm, are there well known sets of parameters for attaining the "stacked" version of the graph with existing algorithms? Thanks!
Edit: Although the above graphs are strict "trees", the algorithm I'm looking for should be able to handle cases where nodes have more than one parent, and cases where there is more than one path from root to leaf. Here's an example, and here's another.
Edit2: In case it's useful to anyone, a hacky (and slow) force-directed approach with pre-computed node layers (y-axis contraints) seems to work all right. Here's what it looks like. That example uses cytoscape.js and cola.js, and it's upside down. It's not at all a solution to this question so I'm just putting this here as an edit.
(SO wouldn't let me submit the JSBin link without a code block...)
I don't know of any specific names for the above. It looks like the layering algorithm in both cases is the longest path algorithm that minimizes height but essentially ignores width. If you layer the graph from the bottom-up and the graph has many sinks (vertices with zero out-degree) then you will get a wide bottom layer (a "stacked" layout?). If you layer the graph from the top-down and it has many sources (vertices with zero in-degree) then you will get a wide top layer (a "hanging" layout?).
I have an application that generates a d3 display using the force-directed layout. One of capabilities in the application is to show all paths from vertex A to vertex B. I want to pin the start and end vertices to the left and right edges of the display and I've accomplished this programmatically, but I'm not happy with results as the force directed layout clumps all of the remaining vertices in the middle of the graph div. Changing the gravity and the link strength parameters to the force directed layout simply changes the size of the clump in the middle of the screen.
Any suggestions on how I can distribute the middle vertices more uniformly between the two pinned endpoints?
Thanks in advance.
I would like to use graphviz for a project and am unable to get the behaviour I want. I have a graph that I can draw with graphviz just fine, but I also have a version of the same graph that has some extra edges. I would like the second graph to be drawn with the nodes in the same positions as the first one and the edges in the same positions, but the new edges to be drawn without avoiding any overlap with nodes.
To get a better idea of what I want, imagine a Powerpoint slide with a graph and then on the next slide the same graph with these extra edges that appear on top of the first graph, wihtout modifying the look of the old parts of the graph. That is the effect I want.
I think the effect could be achieved by having some edges ignore any overlapping constraints. I could not figure out how to control the overlap between edges and nodes for particular edges (or even for all edges).
Any ideas?
You can get dot to output another .dot file, with positions assigned to all elements, via dot -Tdot (or maybe dot -Txdot). Add your additional edges to that file, and run it through dot again to produce your second graph.