In my application, a graph is loaded initially with the one-net of a particular node. The user can expand the graph by double-clicking any node to add its one-net.
The problem is that every time the user does that, the nodes all jump around, so it's confusing. I don't want to just disable physics, because then the new nodes get jumbled on top of the old ones. For lack of a better explanation, I want to freeze the existing nodes, only using physics to arrange the new nodes (and then freeze them before adding more). I looked at Stop vis.js physics after nodes load but allow drag-able nodes, but that doesn't solve my problem.
I'm pretty clueless about what the various options to the physics solving algorithms mean, and can't find a good description anywhere, so I wonder if there may be tweaks there that would help me.
Thanks!
You can give some of your nodes a fixed x and y position. There are also methods like getPositions() and storePositions() to retrieve or set the positions after the first stabilization or something like that.
Related
Last year I tried to learn a bit React JS for making the project you can find here. I apologize for my rather vague / imprecise description below, but I'm by no means versed in this.
Basically, there is a single <svg> tag, which will contain a number of paths etc. as created by the user. The problem I have is that things become very slow the more paths are present. To my current understanding, this is due to the fact that the entire SVG DOM gets updated repeatedly upon user interactions that involve dragging the mouse or using the mouse wheel.
This holds true, particularly, for two user interactions:
a) Panning - all paths are being moved at the same time; I think one might circumvent this issue by taking a snapshot image first and moving that around instead. However, that's not a solution for the other user interaction, which is:
b) Expanding/collapsing paths - here, all paths are being modified in terms of coordinates of some of their points. That is, every path must be modified in a different way, but all of them must be modified at once, and this must happen repeatedly because it's a user interaction controlled with the mouse wheel where changes happen gradually and the user requires immediate visual feedback on these changes as they happen.
Particularly for b), I see no alternative that would involve a single transformation or something.
After extensive research last year, I came to the conclusion that choosing SVG to display and modify a lot of things dynamically on screen was a wrong decision in the first place, but I realized too late, so I gave up and have never touched it since. I'm pretty certain that there isn't any way to deal with the low performance that builds upon what I already have; I have no intention to start this project from scratch with a completely different approach. Also, the reason why I chose SVG was that it's easy to manipulate.
In summary, I'd basically like to get confirmation that there is no feasible way to rescue this project.
Whenever you refresh this example, the nodes are in a different order. How could you make it so the order is the same upon each refresh? Perhaps "sub node 1" at the top, then adjacent to the right is "sub node 2", etc, all the way around. Other than that, this example works for what I need to achieve.
The solutions below seem to require fixing the nodes to x,y points. But doing that seems to eliminate the drag functionality (the nodes need to be able to be dragged into different locations to change the order). Also, I don't always know how many nodes there will be initially.
https://groups.google.com/forum/#!topic/d3-js/NsHlubbv3pc
Calm down initial tick of a force layout
Configure fixed-layout static graph in d3.js
While the drag is a requirement, the animation is not. I tried seeing if stoping the animation had any effect, but it didn't.
var n = 50;
for (var i = 0; i < n; ++i) force.tick();
force.stop();
Also, tried adding a new property to the data giving each child a rank to manipulate somehow. And tried assigning id of the rank and sorting. Also tried using the index number of the array of objects. No luck. Thanks for any ideas.
Per Lars' comment, it seems this is not possible in a force layout. Switched to tree layout. JSFIDDLE Still need to add the drag piece. Will update if I can get that working.
Links to jsfiddle.net must be accompanied by code.
The reason it is not the same each time is d3 uses a random number to prevent nodes getting stuck in odd places. In my limited understanding the random number acts to "jiggle" the graph to help it untangle itself.
A simple solution to making it predictable is to replace the random number generator with a predictable random number generator such as that provided by seedrandom.
If you seed the random number generator with the same seed before running the simulation the results will be the same every time.
Note only a small change to the graph will cause the graph to have a completely different layout. (I always think of the butterfly chaos effect to explain why).
So I have a simple tree graph that is broken down into categories which may change later.
This will be strictly for ipad/chrome, so dont worry about legacy.
I would like the branches(lines) to kind of grow from each category(Voice/video Chat) to following nodes(hangouts, skype etc). I'm pretty sure that canvas is the best way to implement this. The data for the nodes and categories will be fetched from a javascript/json factory/model in angularJS. Can anyone at stack help me with a solution that could scale for changes and make clicks and animations simplistic for rapid changes.
If possible, extra comments in the realm of canvas (where I know almost nothing).
This is a preemptive strike for me; so If, I'm asking for too much sorry.
D3 would probably be the way to go. It often comes with a steep learning curve though (at least for me, not having worked with SVGs before).
Mike Bostock has a similar example: http://bl.ocks.org/mbostock/4339083
The nodes are interactive and have several layers of nesting. It's done as a left-right tree, rather than top - down like you're wanting. So it'll require modification to get it how you want.
Another example from Mike Bostock is: http://bl.ocks.org/mbostock/999346. This is a top-down.
Can someone review my implementation on JSFiddle and give me some pointers making my code cleaner and robust?
I've been working on this in JsFiddle. I am attempting to get a nice clean graph implementation for workflow design. For instance, we have input and output nodes and processes in between. Although I've done linq style functional programming in C#, this javascript implementation is a bit tougher to get my head around. All of the functionality that I want is in the various example pieces of code. I have attempted to bring them together, but it could be tidier and nicer.
http://jsfiddle.net/3ckG5/9/
These definitions confuse me, they have different names and properties across the examples. Really not getting it.
var svg = d3.select('body')
.append('svg')
.attr('width', width)
.attr('height', height);
The object scopes confuse me and I don't fully understand them.
Here is a list of functionality, a bold text indicates working. This example forms the basis of the implementation (http://bl.ocks.org/rkirsling/5001347), and others are linked next to the bit of functionality that they confer. However i am getting confused as they each work slightly differently and bringing them together is more of a challenge than anticipated.
Nodes
Nodes repel each other with charge value
Control node colour
Control node radius
Control node label
Delete a node
Deleting a node, also deletes that node's inputs and outputs //Node selector???
Node dragging and repositioning. kinda.... but oh so buggy (http://bl.ocks.org/norrs/2883411)
Only process nodes can be dragged and repositioned.
Node inputs or outputs repositioned based on associated process node position.
Labels on nodes
Only node inputs and outputs can form links
Only node inputs can connect to node outputs and vice versa.
Can only connect if same input/output type
Change colour of all nodes of the same type that can be connected to, when going to connect two nodes.
Links
Set link lengths
A drag line is is made on mouse down.
Markers on links
Markers always point from input to output.
Area
Pan/Zoom (http://bl.ocks.org/benzguo/4370043)
Any tips would be greatly appreciated.
DUPLICATED IN STACKEXCHANGE..... although they feel it is off topic on there. Anyone? Anyone at all have some positive input here?
I'm using a modified version of the following example and everything works great so far.
What I am trying to do is to make the nodes bounce from each others and not overlap because I can't see the text and icons of a node if there is another on top of it. Is there a way to make this happen without modifying too much of code that works already? Maybe add something like enabling collision for the nodes?
ok i its seems that setting the charge to .charge(-300), sets the nodes apart by pushing them away from each others.