I've been experimenting Compound Graph editor based on Cytoscape.js.
I created a function for adding a compound node for a set of selected nodes with the same parent.
Roughly, it is first tested if the selected nodes have the same parent. If the case, a new node is create, as a child of the parent, and all the selected nodes are moved to this new node.
It seems to work well.
E.g. I created a set of nodes, and grouped them with two levels of decomposition the following way.
A hierarchy of compound nodes created with the created functions
However, when trying to apply the function on a set of nodes at layer 2 as illustrated in the next figure:
Initiating grouping for a set of nodes layer 2
The result is quite surprising, as illustrated in the next figure. The hierarchy of compound nodes is fully changed, while applying exactly the same algorithm than previously.
result of using the function
So I'm wondering if somebody already faced this, and if any idea concerning the reason of this behavior.
In order to debug, I tried to identify the place where the move function is defined in the code (but I didn't succeed yet) in order to put a breakpoint on the call to the move function and to identify which part of the code could cause the unexpected change of parents.
So if someone know where I can find this piece of code, it will also be helpful for understanding where the issue is coming from.
Related
I currently have this graph implemented and I'm hoping to keep the structure and collapsibility while depicting a child node having multiple parents. Is there a way to do this? I looked into force graphs but I'm also wanting to preserve a set hierarchy (meaning a parent at level 1 can have a child and level 3 shown). After a lot of research and tinkering with my current code, I am unable to figure my issues out. Is there anyone who has any experience with displaying a D3 tree node with multiple parents?
Just in case anyone was wondering what I did to answer my question. I ended up making a force diagram behave in the same manner as a tree. This provided me the possibility of having multiple parents and I just had to do some fiddling with how the diagram used forces in order to preserve hierarchy.
I've implemented force layout and it's working well. However, the problem is, dragging one element doesn't pull other elements. I didn't assign fixed:true property so that is not the problem.
Here is what I did. As you see, dragging one element doesn't fully affect the others. For example, pulling one node to the right doesn't move the other nodes to the right. But what I want to do is like this example.
I'm getting used to d3, but seem to be having trouble with more advanced structures. I'm fairly sure there's some subtlety or concept I am not fully appreciating. I want to be able to mirror a changing hierarchical data structure with a changing hierarchical element structure.
My data structure is 3 groups, each with 3 items. Each group and item has a unique key, extracted using a key function in the data() call.
I build the structure, and I can remove a top-level item; .exit().remove() works just fine on that selection. BUT, modifying or removing any sub-item is simply not reflected in the generated element structure.
Full (non-)working jsFiddle here!: http://jsfiddle.net/eu95R/2/, and the all-important enticingly beautiful screenshot:
The problem is that your definition of groups is using svg.enter() and the subselection is made on groups. That is, you're not seeing a change because groups in this case is empty (no enter selection for the SVGs) and therefore there's no subselection.
To fix, simply do the subselection based on e.g. svg (there are a number of ways to fix this -- not saying that this is necessarily the best one). As you are appending the elements to a g within the SVG, the selector would be svg.selectAll("g").selectAll("text.item")....
Complete demo here.
I am working on a graph which basically contains at least 150 nodes using D3 Javascript. The idea can be described as follows:
One node is connected to 100 nodes.
49 nodes of these 100 nodes are connected to other 49 nodes.
Let's clarify it. I know 100 people. 49 people of them have birthdays. Each of which represents a node.
In such a way, I could manage to link them together using source and target through some arrays in Javascript. I think I am missing something very important to understand in Force-Directed Graph in D3. As far as I am aware, the links can be implemented with source and target. My problem is I cant understand how I can link these links to these nodes. I do not know on what basis I can create an array to hold my name, peoples' names and their birthdays so they can be linked together. In my graph, it gives me the right person but the wrong birthday. Could anyone please guide me the right way how to do with this matter. I am following this tutorial: and could not understand how I can create an array to add the information such as: name, peoples names and birthday.
http://bl.ocks.org/mbostock/4062045
Your assistance would be very much appreciated.
The way the nodes and links are linked is by index. That is, if target: 0, it means that the target node of that link is the first one in the list of nodes, as passed to the force layout. You can add any data you need to both links and nodes -- for links, the nodes are also available through link.source and link.target.
Alternatively, you can specify the source and target of a link as the object itself -- this is actually what D3 does internally when you pass the links to the force layout. As it can't work with the indices as such, they are replaced with the resolved node objects (this is why you can access the actual objects through the links).
If you're specifying the graph structure through external data (e.g. JSON), then you should use indices to identify nodes in links. If you're generating the data structure in Javascript, you could use references to the actual objects instead.
I am working on an interactive graph visualization using the d3.js force-directed layout. I want users to be able to select sets of nodes by clicking on them one by one. I have a set of computations that I'll allow users to perform on the selected set. For example, the user could select two different nodes and then ask the system to compute the shortest path between them (if there is one).
So, the question is how to represent the selected set of nodes so that I can (a) allow the user to add and remove nodes from the set, (b) visualize the selected nodes (e.g., by highlighting them), and (c) perform computations on the nodes.
I see a few different options that work at different points in the d3 pipeline.
One is to have a flag on the data itself that indicates whether a node is selected or not. Highlighting the nodes is easy: the various style and attribute functions look at the d.selected flag. I'm not sure what the best strategy is for handling selecting and deselecting nodes, though. Do I set the data value, then rerun the whole d3.selectAll.data.enter.. mess?
Another option is to keep a separate array of selected nodes as a global variable. That makes finding the set of nodes easy. To implement highlighting the style/attribute functions would see if the given node is in the set. Again, I'm not sure how to make the visualization change when a node is added or removed from the set.
The final option is to change the style/attributes on each node right at the moment it is clicked. But then how do I determine the set of selected nodes?
Any advice would be greatly appreciated!