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.
Related
Currently, I'm trying to have a family tree which will have
Spouses/Partners (Multiple)
Children of Spouses/Partners
I want to get this done in React.js, and I am using VX for it.
As per D3 tree structure, we could have only one parent for a child, so in order to generate a tree as per my choice, I had to align partners as children of a member. And with additional JSON key, I style the partners. See the example below.
The same is available in my repo
I am impressed the way how Cyril Cherian tried to implement the tree with partners in this JSFiddle
`https://jsfiddle.net/cyril123/fcd5q8fv/1/`
and I made a fork of it (Javascript)
`https://jsfiddle.net/Vaishak/x6bg9dcu/`
and made some changes.
But the problem with this is that it cannot have multiple spouses/partners in a clean/straighforward way, will have to modify the JSON very badly.
Same JSFiddle script is also avalable in my repo
I would like to have the mix of both, where
Partners will be aligned with member of the tree
Partner will not have the line from any other node (unless mentioned)
Children will be originating from the mid of Partners line
Any solution here? :)
Note: I've posted the same on VX's github issue page, not sure whether this will be addressed there.
For making it easier for people who look for answer for this question.
I could tackle it down and got solution as seen here
Please feel free to look at the data structure and the way I drew spouse line.
I'm building a visualization similar to http://bl.ocks.org/mbostock/1093130, with huge amount of data. I could not figure out if it is possible that a child node can have multiple parent nodes? for instance, as per the visualization shown in the previously mentioned link, can "shortestPaths" have parents "graph" as well as "optimization"? I have looked around stackoverflow. Could not find answer that solves this problem.
No, it is not possible, if you rely on the example you linked to at the beginning of the question. This is because of this code:
var nodes = flatten(root),
links = d3.layout.tree().links(nodes);
d3.layout.tree() requires tree-like data (no multiple parents).
Of course, you can always develop entirely yours solution that will handle such cases. But you can't do it based on the example you mentioned.
I'm looking for some guidance in approaching a tree/graph traversal problem with the following
specifications:
There is one root node.
The root node can potentially have infinite child nodes.
Each child node can have only one parent, but can also itself be parent to potentially
infinite child nodes, and so forth.
This will, in a real-world scenario, in most cases be a small structure. However, it should
still work for large structures, with regards to traversal and deletion.
I'm most concerned with deletion, as deletion of a node MUST delete any of node's children,
grand-children, etc. as well as any reference to the deleted node in the parent.
How would I approach this problem with efficiency in mind. I'm looking to implement something in Javascript/JQuery. I hope this is enough information and any advice is very much appreciated.
Thank you.
* EDIT/UPDATE *
I think the structure described above will most closely resemble a directed graph and due to potentially infinite child nodes at each level, will not be a binary tree. Also, I don't know if I'm articulating this properly, but the structure is not laid out according to its node relationships, in the actual HTML code. In other words the visual/code design of the structure does not match the various parent/child relationships that are present in the JSON representation for example. This was a choice made by someone else but regardless, it is my job to implement traversal,insertion, and deletion.
I've looked around some more on SO and found the following link:
How to delete all related nodes in a directed graph using networkx?
The first answer in the link above is the closest I've found so far to a solution. But I don't understand how the "Worklist Algorithm" mentioned in the first answer, goes deeper than the first level?
Again, any help is appreciated.
I'm trying to build a force-directed layout, wherein the connected nodes have their own internal layout that is not simply a recursive force-directed layout (which, I believe, would be possible with the hierarchy layout). The "inner" layout would be custom, but, for illustration let's say I wanted the nodes, internally, to have a partition layout. Is this possible?
My question was really twofold:
can you pull off having more than one style of layout (for instance, a bubble graph inside a force-directed graph) in a sensible way with D3, or is D3 the wrong tool for such a thing, and
Can you use D3 layouts for each of these layouts, or do you have to do everything custom.
In the end, the design changed, and no longer called for this odd scenario. Being much more familiar with D3, though, I think I can answer.
Yes. It can be done. Each layout is its own discrete object, with its own data on which to work, and can be given its own DOM elements to populate. Creating two layouts that even shared the same data and DOM outputs would probably work, if you could manage the interaction between the two (making sure one only overrode changes from the other when desired).
What I know you can do for sure is manually manipulate anything that D3 is doing. At one point during development, actually, I did have two layouts on the same page, come to think of it. I was laying out half the graph with pre-determined x/y coordinates, and allowing the rest to be laid out by the force directed layout. That first set, the manually placed nodes, could have been placed by some other logic than pre-determined coordinates, and the functionality would have been roughly the same.
Can an ASP.NET TreeView, when you click the + sign be made to expand upwards instead of downwards? So that "Children" nodes appear above their "Parents."
Essentially I want to logically be taking what would normally be a singular leaf node, making it the root of my tree, and making what is logically it's Parent into a Child Node on my Tree, but have that Child Node still display above the Parent when the Parent gets expanded.
Think a company OrgChart, but starting with the employee (leaf node) and going up.
I can't seem to find anything specifying direction on MSDN. I would like to avoid having to re-write how the Javascript of the TreeView works, but would be open to it if no other way is possible.
No, you cannot do that with the TreeView component.
Attempting to do that would involve inheriting from the TreeView and writing your custom Render function.
There is a simpler approach to it though. You could write out all your data to a json object, and use one of the numerous javascript data visualization libraries to present it.
I really like the javascript InfoVis toolkit. You can make very detailed graphs using it.