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.
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'd like to achieve something similar to this diagram using d3:
https://gojs.net/latest/samples/records.html
I was trying to look it up on the web but I hardly found any resources to get started with.
I'm quite new to d3 so I don't know how to approach this task, any help or guidance would be appreciated!
This is another one of those questions where people need to implement a sophisticated diagram visualization and they think just because D3 is a lot about visualization, it will be a good fit.
IMHO it is not.
D3 could be a part of the solution, but it certainly cannot be the solution alone: It's almost like asking whether JavaScript can be used to create this kind of diagram. Of course it can! D3 is just a very thin (but very useful) layer on top of the DOM+JavaScript, that can help you with crunching numbers, work with colors, coordinate systems, create DOM elements, and simplifies working with the DOM. Think of it as jquery for DOM and data plus a lot of very nice demos. But the value very often is in the demos, rather than in D3 itself: You need to implement a lot of things to get from a simple mapping from data to dom elements to a sophisticated diagram visualization like the one you are referring to.
If you don't want to implement and maintain most of the low-level diagram logic yourself, you should rather be looking at a diagramming solution, rather than a tool that will help you create SVG elements elegantly with less code.
Look at this question to see a list of graph and diagram visualization software. Agreed, D3 is also on this list (for the same reason you are asking this question), but there are also far more capable tools on that list that you should be looking at, my recommendation being either the one that you've found already or preferrably this one if your requirements are more sophisticated.
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 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 using a jsTree with around 1500 nodes, nested to a max of 4 levels (most are only 1 level deep), and I'm getting Internet Explorer's "this script is running slowly" error. I began with just a straight html_data <li> structure, generated by ASP.NET. The tree wouldn't finish loading at all. Then I tried xml_data and json_data, which was a little better but eventually errored out. My last-stitch effort was async loading. This fixed the initial load problem, but now I get IE's error when I expand one of the larger branches.
More details: I'm using the checkbox plugin, and I will also need the ability to search. Unfortunately, when searching, the user could potentially enter as little as one character so I'm looking at some large set of search results.
Has anybody done something similar with such a large data set? Any suggestions on speeding up the jsTree? Or, am I better off exploring other options for my GUI?
I realize I haven't posted any code, but any general techniques/gotcha's are welcome.
I haven't completely solved my problem, but I made some improvements so that I think it might be usable (I am still testing). I thought it could be useful for other people:
First, I was using jsTree in a jQuery dialog, but that seems to hurt performance. If possible, don't mix large jsTrees and Dialogs.
Lazy loading is definitely the way to go with large trees. I tried json_data and xml_data, and they were both easy to implement. They seem to perform about the the same, but that's just based on basic observation.
Last, I implemented a poor man's paging. In my server-side JSON request handler, if a node has more than X children, I simply split into many nodes each having a portion of those children. For instance, if node X has say 1000 children, I gave X child nodes X1, X2, X3,..., X10 where X1 has children first 100 children, X2 has next 100 children and so on. This may not make sense for some people since you're modifying the tree structure, but I think it will work for me.
jsTree supports all your needs
use json_data plugin with ajax support where the brach would be too big.
search plugin support ajax call too
I'm a bit disappointed in it's performance myself.
Sounds like you need to try lazy loading: instead of loading the whole tree all at once, only load as needed.
That is, initially load only the trunk of the tree (so all nodes are "closed"), then only load a node's children when user clicks to open it.
JsTree can do this, see the documentation.
(Is that you mean by "async loading"?)
jstree sucks - it is the "refresh" which is slow 10 seconds for a 1000 child nodes being added, or to load a tree with 10000 items among 40 nodes it takes over a minute. after days of development I have told my colleague to look at slickgrid instead, as everyone will refuse to use a page which takes so long to do anything. it is quicker if you do not structure it correctly eg 3 seconds for 1000 nodes but then the arrow will not have any effect to close it down.
This is to replace a combination of ms treeview and ms imagelist which loads the same 10000 items across forty parent nodes in 3 seconds.