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?
Related
I have a graph of people who interact with each other.
The graph is quite messy since everybody interacts with each other. What I need is:
Display the "main" person in the center
Display only the first level of interactions
When the user clicks on a node toggle its children visibility (without displaying children of children)
I've read about compound nodes, but the thing is that one node (person) can have many parents and it's not supported in Cytoscape.
This is what it should look like. The red circle is the "main" person. The red rectangle is the first level of interactions. The rest should be hidden till the user clicks on a node, which reveals its direct children.
The only idea I got is to manipulate the data I provide for the chart. Right now I have an array of vertices and edges. Edges have source/target. So I probably can handle it in javascript by manipulating these arrays.
But is it possible to somehow simplify the process?
You can use view-utilities extension of cytoscape.js which provides hide/show functionality. See its API that has hide, show and showHiddenNeighbors functions. You can also play with its demo here.
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.
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).
I am working on some graph visualizations, and I am using the JavaScript library graph Dracula. Now, with this library, when I want to move a node I have to click the node I want to move and move it on the desired place (with drag and drop). But, what I want to do is to select more nodes and move all of them. I can't figure out how to do this, since I am not so experienced in JavaScript programming. So, my question is:
How can I select multiple nodes with rectangle selection and move
them?
How can I select multiple nodes with, say, Ctrl + left click and select more nodes and then move them?
By the looks of things, almost all of Dracula's graph rendering is really managed by RaphaelJS.
In which case, things may be quite a bit easier for you. It seems other people have asked how to move elements in RaphaelJS.
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.